Guide on video hosting for static personal websites

[Charlynne]

Everyone's been talking about needing good YouTube alternatives that works for them, so I wrote up a guide where its solutions would be hosting videos on Internet Archive or storage space services and embedding them to static personal websites. It's not meant to be a tutorial on making "platforms", but for making a space for your own videos.

Be cautious that these free sites are not meant to handle thousands of videos regarding the bandwidth and storage. I would probably recommend encoding yours to smaller sizes and/or using a paid service. Use them with care please.

Free services:

• Internet Archive

What it says on the tin can. Has a lot of music, applications, literature, and even videos people can upload for preservation. You can even add multiple videos and other files in an item, almost like a playlist.

• Abyss

Free video hosting service. Though the compression on videos under 1080p is pretty bad.

• PeerTube

Actually improved a lot more than I expected, even got rid of the bad instances. Now includes mobile apps. Can be hosted by yourself or Fedihost. Yes, this can make platforms for others to upload, but it can also just be for only you and only your videos.

Paid services:

• Bunny Stream

A very flexible video streaming CDN; has VP9 and AV1 encoding with good playback, a customizable video player that you can embed, and it has a pay-what-you-use method of letting you afford $1/mo for Europe/North America traffic that's under 100 GB. I highly recommend this paid service if you're starting out.

• DigitalOcean Spaces

CDN for video streaming + 250gb for $5 a month, and 2 cents per additional GB.

• Hetzner

1 TB for $4/mo. Is slow since it’s mainly for backup storage, but it does work well. Make sure to pay before the monthly deadlines.

• Backblaze B2

Cloud storage offering $6/TB/mo.

• Contabo

250 GB for $2.99 / month. Has worse contact service though.

Hosting your own server as an option:
Get a burner computer to hook up to a storage and use your home connection. There are a few open-source services I can recommend for getting a storage VPS and a self hosted CDN such as SeaweedFS or Garage. It may be more than setting up an SFTP or Rsync then copying the file over to a designated folder but it works.

Adding the video to your website:
The next thing to do is to embed in a video. Just as easy as pasting this in your HTML file. You can use and modify it if you need to.

Code

<iframe src="https://archive.org/embed/Free_VJ_LOOPS_created_with_THRILL_SERIES_11" allowfullscreen></iframe>

There’s other options such as changing the video size and whatnot: width=“640” height=“360”

I use iframes for easy embedding, you can also learn more about video stuff here.

Adding similar features
If you want your video pages to have social functionalities similar to YouTube, there are ways to do so. Comment widgets can be easily placed onto the pages. It doesn't work for new Neocities users though, unless you get a Supporter plan.

And for “monetizing” your videos, Linking to your Kofi, Patreon, or any donation system works. Plus, it allows you to have more creative freedom compared to YouTube so you don't have to sponsor shady products nor bleep out swearing.

Adding recommendations is easy as making simple links on video pages or somewhere else. There's also the option of using webrings to connect to others’ websites who host videos. There are various resources on making one that you can look for.

Another cool thing you can setup
If you really need to make your website look like YouTube, MediaCMS does the job very well where it gives you the familiar UI you need along with support for video, audio, image, and PDF. It even allows subtitles and more.

I hope this guide helps you. You can share this with others if you like.

Examples of individual websites that host videos
Here's a few that could help inspire you to make one.

• https://ddbentl.com/toons
• https://video.loom.cafe/

[Melooon]

I found this guide super helpful as I've been looking for a way to quit Vimeo since they put their prices up! I never even considered a CDN but it lead me down a rabbit hole of research.

Anyway I wanted to share my WIP video site: https://video.loom.cafe (its not static but could be made statically)

I ended up using https://bunny.net for video hosting which is a pay-what-you-use CDN; but they offer a "Stream" service that basically lets you upload any video file and it will transcode it into different sizes, 480p 720p 1080p etc and then give you a video player interface like YouTube would (you can also fully customise it with your own CSS!)

Iv only been messing around with it for a few days, but so far it seems good (minus a slightly weird AI auto video categorising thing they did, but support helped disable that) - I like that its a European company - Im not sure what the costs will be yet, but I'm guessing under 1 euro a month based on the prices and my traffic.

For a purely static site you can then just embed the video as an iFrame like you would with a TY video; but since I have NodeJS running I connected it into the API, so my video list auto generates itself.

Anyway, this post sounds a bit like an ad, but I'm just quite happy with the results, its a big step up over Vimeo And thank you again for this thread since I would not have gotten here without it!

[Charlynne]

Sup, Melon. I'm glad to know that the guide helped you! I've been hoping that it would work out. Also, I just checked out the CDN for bunny.net that you mentioned, and I'm absolutely surprised that their monthly prices for Europe/North America traffic that's under 100 GB is 1 dollar, like you said. It's truly crazy! I want to say thanks for the recommendation! I'll be adding Bunny to the guide when I get a chance to update it.

[cynderthekitsune]

wow, i only just found this!

also,

Get a burner computer to hook up to a storage and use your home connection. There are a few open-source services I can recommend for getting a storage VPS and a self hosted CDN such as SeaweedFS or Garage. It may be more than setting up an SFTP or Rsync then copying the file over to a designated folder but it works.

i only have a gaming PC that i gutted, and an old home PC with a HDD (not SSD) lol, but i'm going overseas later in the year anyways, so i might get a Raspberry Pi 5 or a polycarbonate MacBook to host it, lol

i've found it mildly frustrating because of how large MP4s are, like my own nightcore video is over 230MB even though all it is, is just a static artwork and an MP3 lol

well, i already have my mini archive (on Neocities, with Supporter) but i think if i could get my own hardware - as a burner PC - then i wouldn't need to spend the money every month, and i could host larger files? :3

[Charlynne]

i've found it mildly frustrating because of how large MP4s are, like my own nightcore video is over 230MB even though all it is, is just a static artwork and an MP3 lol

 I believe it's possible to encode video to smaller sizes using software like Handbrake, Avidemux, StaxRip, etc. Even using the AV1 codec would result in better quality videos with a smaller size.

[BlazingCobaltX]

This is a really neat guide and I actually recommend putting it in the Melonland Wiki, as it's not something I've seen a lot of information on before this. Seeing all the options like this together makes it seem more straightforward and easy to try out sometime myself (even if I have nothing to host). Great work!

[Charlynne]

This is a really neat guide and I actually recommend putting it in the Melonland Wiki, as it's not something I've seen a lot of information on before this. Seeing all the options like this together makes it seem more straightforward and easy to try out sometime myself (even if I have nothing to host). Great work!

I agree with having this guide be on the wiki, because I think it'll help more people. Also I've did a small update where I added in two website examples that host videos: One being from Bentl, who inspired me to make this guide, and Melon's Loom Cafe videos site.

[Melooon]

I agree with the wiki idea ~ if I can be so bold as to delegate, the wiki can be added to and edited by anyone so I hope someone will take this on: @GlitchyZorua seems to have become the main wiki mod these days and knows more about it than me, so you might talk to him if you need assistance 

[xwindows]

Thanks for your effort in finding and listing all these for people who really need it.

However, for the issue of sustainability of video posting in general, I do think that we need to "scale back" our thinking quite a bit. I'll offer my rule of thumb:

In the realm of personal websites: if one is not making money off his video works (i.e. professional); then he should cut down his posting of video media to the bare minimum that he could comfortably host on his own site, serving regularly to reasonable audience count, projected for the site's estimated growth for at least 5 years forward.

Video may be the most "friendly" edutainment consumption format for the unwashed masses; but it is a format with the worst ratio of information offered vs. (giga)bytes transferred. Actual juices of many informative videos could pretty much be reduced into article with images, sized 100 times less than the video version-- and some of which can even be reduced to text without image (sized 10000 times less than video version).

Granted, there are several things that cannot be (adequately) presented as words and stills, like choreographed music videos, evidence footage, or live demonstration of equipment or software-- then by all means, use video; BUT only for specific bits that absolutely need it, and do the rest as writing (and photos) as much as possible. Like instead of doing a whopping 30-minute video essay showing the equipment around and how to operate it; write most of that in text, with pictures showing relevant angles discussed, then show each actual operations as one (or few) half-minute video clip(s). The data needed for the whole thing would be reduced 20 to 50-fold, even that the piece was still using videos.

These are perfectly serviceable, and people did these 2 decades back in the past; they just stopped doing it because they then realized they could externalize the cost of videos to "free" video hosting services like YouTube (0)...

^ Just like back when many of us externalized the cost of liberally-sized images to "free" image hosting service like Flickr, Photobucket, Imgur, and many others in the old days; which we all know by now on how they come back to bite us in the @$$ later on.


And speaking of the cost, there is also one elephant in the room which people often avoid speaking of: the cost of HD.

I notice this, because I'm one of the "older" people who have been surfing Internet before the era of ubiquitous Internet videos: which for this discussion, I'll draw the line marking the start of that era at the time YouTube first offered "HQ" playback option... the option that is known today as the "360p" video resolution.

This has been the first "watchable" Internet video resolution, ever. (1) Before that, they were just blocky eyesores.

But one thing that set me apart from other Internet video viewers is that I ignore tech industry's number-racing gambit; what's being good enough is enough. Fast forward 17 years to today, when I go watch Internet video someone sent me a link or ones I dug from my to-watch list... I set it to 360p, like I have always done.

And yes, I do this even when the screen in front of me is being a photographer-grade full-HD IPS/LCD 23" monitor (2); because that's Just Good Enough (TM) for nearly every informative (3) and entertainment video I have ever watched (and archived). (4)

Why this matters?

Look at the file size: a 4-minute H.264+AAC full-motion professionally-uploaded YouTube video in 360p resolution would land around the ballpark of 15 MiB per video (or less, if the video got less movement).

^ In the realm of personal websites nowadays, that's not much at all; posting a few-minute video in 360p resolution is basically in the same league as posting a high-resolution image on your website-- not big deal. Do it this way and you will still have ample room to post (hundred+) more videos in several years to come; all without relying on external service, ever. So if you absolutely need to post video on your website, you should only do so in 360p resolution. (5)

And when you encode your video minimally like this, if one of your article-with-video got HackerNews'd today --a problem that some people deem "nice to have"-- it would likely be able to hold out okay as well. (6)

On the flipside, if you bumped up the resolution (7) even to just 720p (not even the more-common 1080p "full-HD", or heaven-forbid 2160p "4K"); the self-hosting situation would simply become... dire.

When we're escaping from the grasp of large-scale technology conglomerates and do things ourselves, it is important to reconsider which parts of our technology uses were essentials-- even if they look quaint and boring, and which of them were frills-- even if they were extravagantly-dressed and widely-hyped; in order to spend our now-limited resources efficiently, on things that actually matter in getting the point across.

In any case, in the realm of small Internet and self-hosting, I ask you to think trice, before choosing to "pivot to video".


(0) Which such platform also now realize they couldn't shoulder the cost forever, so now there comes massive data collections, supercharged tracking, anti-adblocking, start+mid+end-video unskipable ads, and viewer-abusing hyperpersonalized addiction engineering to milk, squeeze, entrench, and monetize every eyeballs to the last drop. Karma is unforgiving, you know.

(1) A 16:9 video clip in 360p resolution will fit on 640x480 VGA monitor and NTSC CRT TV unscaled; meaning that resolution-wise, it is on-par with looking at your favorite 16:9 DVD playing letterboxed on your old 4:3 TV set.

(2) A catch is you ought not to use dog-terrible video players which did just the "bare-minimum" bilinear-scaling of video up to the HD resolution output-- they would definitely look quite a bit of blurfest in such cases.

(3) Granted, it do take a bit of production consideration to produce videos which remain "legible" and useful at that resolution. The solution need not be high-tech, for example: a well-known videocaster Clive Mitchell would "zoom up" on the circuit board by putting its full-page photomacrography printout on his desk. (Having been watching his videos exclusively in 360p, I assure you: they are very legible)

(4) Also bonus point that no one in my family could ever blame me for slowing the Internet down for the rest of my household... because I barely use any, even back at the peak of my YouTube "addiction" in the late 2010s.

(5) This also sidestep the entire set of chores in having to recode+post multiple resolutions of video. With 360p being THE single resolution you provide in this scheme (8), any visitor who got enough bandwidth for any sort of video would be able to view that with no problem.

(6) But it would not hold if content-laundering robots hit you; even sites without video can and already went downhill with those. So ready your nuclear weapons if you found them coming your way.

(7) 480p or 576p (i.e. DVD-resolution) clips might be feasible without leaving the selfhosting realm; but you ought to be really careful about using that.

(8) I think that for self-hosting, most webmasters would opt for a single codec as well; which means single video file to rule them all. I won't judge you (much) if you used H.264+AAC in .mp4; even if all browsers I have won't play them. But if you ask what I'd use, I would use VP8+Vorbis in .webm (or Theora+Vorbis in .ogg for less-complex videos) which are royalty-free codecs that have been supported by virtually all browsers (except ones from proprietary overlords named Microsoft and Apple of course) from the dawn of original of HTML 5.0 specification.

[xwindows]

i've found it mildly frustrating because of how large MP4s are, like my own nightcore video is over 230MB even though all it is, is just a static artwork and an MP3

And you shouldn't do that on your website!

Such static-image video music only become a thing because YouTube's content model forced it to be that way. In itself, it is a very inefficient music distribution format.

Why? Because modern video compressions (virtually all of them; not just H.264 in MP4) are mainly about storing differences between each frames. Which, to be able to reconstruct a video from frame differences, it would need a reference starting point; and that starting point for the comparison is called "keyframe"-- a frame which its image content being stored in full. And those keyframes will be scattered at regular few-seconds intervals within your video file. (1)

When you encode a still image into a video-- granted, there would be zero difference between frames; but that "still" image will still be recorded in full as each keyframe; which means, depending on how long the song was (and the encoding parameter in-use), the video encoder would store that image repeatedly for hundreds of times, into that video file; and that is where its enormous size comes from.

And if you think that: "okay then, since it's all-still, how about I'd just force the keyframe to be only at the very beginning and nowhere else?", I will answer this up front that: yes, technically you can; but you would not want to do that...

Because another importance of keyframes is they also act as seek points for your video file. (2) When a player seek to play video at the position of keyframe, it would have enough information to start showing the video right away; compared to a situation when the seek target was somewhere in the middle between 2 keyframes-- which the player will have to seek backward to the location of previous keyframe, then perform a full video decoding from that point back to the original seeked destination, to have an actual picture to display and continue playing.

The farther apart the keyframes were, longer the time (and more computing-intense) it will need to seek. On some implementation of dedicated hardware decoder, the decoding time needed to "skip" to the seeked destination between keyframes would be equal to the time needed for an actual playback of the skipped segment. (3) Some resource-conscious video players would even outright disallow user to seek to anywhere that wasn't a keyframe altogether. (4)

So when a video file only had a single keyframe at the beginning... that file would effectively be an unseekable mess. For this reason, any sane video encoder will not do that (5), even if it actually saw that your "video" was just a still image with accompanied soundtrack.


A correct way to show a music with cover artwork on a website, is by including the cover artwork to your HTML page by via a regular `<img>` tag; then include the music file separately via HTML 5.0's `<audio>` tag (6), with playback interface visible, placed right above (or right below) the artwork image, sized to be the same width.

And if you'd rather target displaying such cover in media player hardware or software when your listener downloaded your file and play... did you know that audio files' metadata header allow you to embed cover image? (8) This definitely would increase the size of music file up a notch; but the added size would essentially be equal to the size of (compressed) cover image you use-- rather than multi-hundred times of that. This addition also coexist with the HTML "displaying" method I mentioned above with no problem.

This way, you wouldn't need to burn through your site's storage space, monthly bandwidth quota, and your viewers' cellular bills (as well as their battery level), with those ridiculous, wasteful, expensive, and gigantic static-image video music abominations; while still get your remix out there.


(1) In old-school video codec like MPEG-2 used in DVD, it could be as frequent as 3 or even 10 keyframes per seconds. But for modern codecs used on the Internet like a libre VP8 (usually in `.webm` file extension) or proprietary H.264 (usually in `.mp4` file extension), it would rather be like 1 keyframe per several seconds. This interval is adjustable, provided that your video encoder was geeky enough.

(2) In some literature, it's called "index point".

(3) Tangent: if you have an over-the-air digital broadcast TV receiver (especially DVB-T2, which use H.264 codec), you probably notice that that you can't instantly change channel (the screen would black out for like 3-7 seconds before the target channel would display), even if the current channel and the target channel were muxed in the same frequency and didn't need the tuner to jump to a different band.

This is because changing channel is like seeking on a video "file" that is gradually broadcast over the air: the display blacked out because the decoder needs to wait for the next keyframe of the target channel to arrive-- which would contain a full-picture starting point for the decoding to begin. Unlike playing a video file, the receiver cannot simply jump ahead to the next keyframe either, because that is literally still in a future. So you have to wait in real time for a moment that a keyframe eventually come up on the broadcast for set to start displaying; which thankfully, are only in the order of several-seconds wait time in normal cases.

(4) I know because I use one.

(5) Unless you went under the hood and force it to.

(6) Or <video> (7), <iframe>, <embed>, or <object>; whatever that works for you.

(7) Yes, you could even abuse the HTML 5.0's `<video>` tag for this, by pointing its source to your audio file, enable user-facing playback control, and then proceed to set its "poster image" to your cover artwork file. Take this with a grain of salt though, because while this works generally (like under Opera Classic 11, Firefox 128 ESR, Pale Moon 25/28, Chrome 135, and Edge 135), it would be quirky on some browsers (Firefox 10 didn't show user-facing control properly, while Safari Mobile 15 and Safari desktop 16 stopped displaying the poster as soon as the audio started playing).

(8) In MP3 format, that's doable in ID3v2.3+ metadata tag, provided that you use a right software.

[Melooon]

@xwindows this seems like good info, and I agree about static image videos being better displayed as html images and audio files ~ however I think you might need to compress these posts down a bit, this is information overload and I suspect you'll prob loose your point on many people skimming this thread.

To the argument of "people should use less videos"; that's prob true, an hour video essay is more efficiently served as a text file thats searchable. However, I think frankly the ship has sailed on this one ~ video essays are a distinct medium with their own qualities that cant be replicated in text, and the people who want to create them are not going to stop creating them.

Likewise even with the nightcore example: the fusion of the video, sound and still image is intrinsically part of what makes it a nightcore, regardless of where it came from or why ~ asking people for break that fusion is essentially asking them to create something thats not a nightcore ~ to many, this misses the point.

I agree with you here in many ways, and I think a "use less video" thread would be a good discussion ~ but for people actually looking to host video and who have already decided that video is what they wanna do - I don't think that saying "don't do video" is going to get very far.

I feel its better in this case to say "yes people will be hosting videos, so how can we minimise the impact of that" ~ Id answer that by saying: A. Network bandwidth is constantly expanding and as fibre networks gain more bandwidth and storage gets cheaper, the size of videos is simply less of an issue. and B. a huge amount of bandwith and size issues can helped with things like compression (as you discuss), it might not be perfect, but using a tool like HandBreak is a great option the make a video less bulky on a person site. and C. informing people about hosting options with their pros and cons is very useful as this thread shows.

[Charlynne]

@xwindows

I agree that using webm works better for video hosting. And regarding if people were to host long video essays on their website, I really think they should go for the blog/article format instead, because I'd be able to read at my own pace and it wouldn't take so much bandwidth or space.

[cynderthekitsune]

also, what are some suggestions for PeerTube platforms too?

i'm still looking for one that only i myself can host videos; basically just the bare minimum (hosting videos and nothing else)
no interactions or anything, i just want to embed it to my site..

[Charlynne]

also, what are some suggestions for PeerTube platforms too?

i'm still looking for one that only i myself can host videos; basically just the bare minimum (hosting videos and nothing else)
no interactions or anything, i just want to embed it to my site..

I guess you could have your platform disable user registration like some other peertube platforms do. I think there's an option for it and other things that can help you disable stuff you may not need.