Static embeds for tweets and videos

Posted March 11, 2021 with tags #site

Tweets and videos embedded in this site are now static, displayed using my own custom HTML/CSS! Previously I used the templates provided by Hugo, but I had a few motivations for going with own approach.

  • Remove third-party iframes and scripts from my website
  • Load content lazily, and without causing page reflow
  • Generate embeds at build time, rather when clients load a page

Embeds from Vimeo and YouTube are pretty basic, with a thumbnail linking to the respective sites. While you can’t actually watch videos on my site, but in return mobile clients can now use their native app for viewing. I think this is more desirable.

Tweets are bit more interesting. They aren’t just plain text, and they can include images and video. The design and approach I use is based on work by Jane Manchun Wong in her own site.

I still have a little more work to do before I’m completely satisfied with these static embeds, and then I’ll write more about how they work. For example, I still hotlink to media files like images and video. Fixing that is work for another day though.

Thanks for reading!

Niko from the video game OneShot

I’m a developer with a passion for web development and automation!

I use this blog to write about my interests. They’re usually tech-related, but there’s also the odd music and gaming piece too.

If you’re wondering, this is Niko from the game OneShot. You should play OneShot.

← Live music has returned to Melbourne

Phones on silent while recording, please! →