wingsite
Adding video and rethinking templates

published: 2025-11-24 16:07:16

I play a lot of games with my friends, sometimes interesting and/or funny shit happens so at some point a few years ago I started using OBS’s1 Replay Buffer, which saves the previous [X time] of video after you hit a hotkey to save them. I’ve also recently started just recording longer segments of things I’ve been playing and decided I wanted to share them, though not the stuff I’ve recorded with my friends. I’ve also been contemplating making videos for various things for a while but whether or not those ever materialise is a matter for another time.

I have no interest in putting anything I make on youtube or any other platform, I’m just going to put them here and make a static video section. My current setup didn’t really allow such a setup though so…

Templating

When I started making nestbuilder2 (my site generator) I wanted to keep templates simple and lowdown (the markdown converter I’m using) uses a very simple one. It has variables and very basic if and for loops, but when I was building my video index page it became clear I needed something slightly more complex.

Tcl has a source command, much like bash, it will just execute whatever tcl file you point it at. If you assign the result to a variable it will be set to whatever string comes back either from whatever was printed last or set explicitly using the return keyword. So I decided to swap out the current templates for… tcl scripts!

When the pages are being looped through I have a $page variable accessible to the script that can be used to access the metadata dict and I have a generateHtml function available to convert markdown to HTML and a indexList function that returns a list of pages in the given directory sorted by timestamp. I also use source from within the templates to call other templates, mostly for the header and footer. That’s all that’s been needed so far but I’ll add more as they come up. Once the script runs, the output is saved to the HTML file in the same directory.

Video Index

Before changing how my templates work I used to build my index pages by first putting together a markdown file with a list of links then letting the regular page generation turn in into HTML. Now that’s all done in the new index template itself, and, finally moving onto the video part; I have two templates now, one for regular links and one for video. The regular one will output pretty much the same as it used to but for my video index I wanted to have something more gallery-like. I wanted something easy to loop through without having to add steps for searching for random filenames so I decided that every video will have the same name: video.mp4, and of course since I making this like a gallery, a thumbnail.webp file.The video page itself uses the standard HTML5 video tag to show the video and anything in the index.md file is shown below it as a description.

I played around a little with my format choice. I started with MP4 for video and PNG for the thumbnails. MP4 is playable by basically everything and it looks good, but keeping filesize in mind when self hosting video, I did look at newer codecs like VP9 and AV1. They reduced the filesize but things were noticeably fuzzier but they seemed to take forever to encode (I was using ffmpeg) and support for them on older devices seem lacking. I may come back to video in the future but I’m sticking with MP4 for now.

PNGs for the thumbnails though, I did end up changing. The webp format dramatically reduces filesize at the cost of much fuzzier looking images, however, since they mostly exist at a small size in a gallery anyway, it doesn’t really matter that much. I also use the poster attribute of the video tag to have them show as the thumbnail of the video. Does reducing the filesize of images matter when I hosting videos? Probably not, but anything helps, so I’ve stuck with webp.

Storage

My VPS comes with a 40GB SSD and I also have a 50GB volume attached to it. I don’t have many videos right now but I wanted to tackle the storage issue early because who knows in the future. Hetzner has relatively cheap storage boxes, at time of writing they’re €3.20 for a 1TB box which are using regular HDDs. I got one and started doing some testing. First off, I’ve limited the box to not allowing external access, which means it can only be used on VPSs within Hetzner’s infrastructure. These boxes can’t be attached to your VPS directly like the storage volumes and have to be accessed over a network. I first mounted it with sshfs because it’s my default, though I suspected it wouldn’t be up for the use case, no harm in trying. It held up surprisingly well when I had several friends test watching videos simultaneously, though I still wanted to try other methods.

The storage box also supports WebDAV, which I’ve never used. Hetzner has some instructions3 for using it. I couldn’t get it connected using it, though it would later turn out that I forgot to hit save when enabling WebDAV support on the box, woops :D It was pointed out to me by ghosty that rclone supports WebDAV mounts and it was while setting that up that I noticed the mistake. Still I continued just using rclone as it less hassle. There’s a lot4 of options for configuring mounts and I’m still toying with them. I had my friends test out playing videos again and the WebDAV mount seems noticeably smoother so I’ll be sticking with that.

Future

I’ll keep tweaking stuff, might change up how the video page itself actually looks because it’s very plain but I’m ultimately happy with how the video section on a static site turned out! My next big thing to work on will probably be finally getting tags to do something, every page and video has them but I don’t show them since they don’t do anything yet.

I forget about the RSS feed while I testing this so if you subscribe to the “all” feed you’ve probably already seen the videos pop up :p I have added a new feed specifically for my game videos, if you don’t want them in your feed you can swap out to the plain “blog” feed. I decided any non-gaming videos I eventually make will be separate too.