Problem
Though I had a lot of space for media in my design, I was finding choosing a single feature image for each post challenging, especially with each page placing that image into a different context. I’d also noticed a trend in corporate websites adopting masthead videos to great effect.
Solution
I found some helpful articles online:
I knew I’d have to employ graceful degradation, so image (poster) fallbacks would be necessary. I was also conscious of loading too many assets at once, to the detriment of bandwidth and the creation of ‘noise‘, which warranted investigating asynchronous loading and some sort of automatic compression toolchain.
I decided that I would extend the field types in my CMS to incorporate an optional featured video. This way, the few posts being highlighted in the UI could auto-play and appear grandiose, while smaller links to post items could fade-in a video on-hover (similar to YouTube’s video preview).
I use a myriad of screen-capture tools depending on which platform I’m on. Since my site is dynamic, my CMS is hosted, and I can update it from anywhere. If I had the time to investigate some automatic video compression post-submit-hook, I would, but in the end I just used a combination of MonoSnap and PS2PDF.
I extended the model for a blog post to include an mp4 and webm link, which seems sufficient since they’re both widely supported.
Adding the above snippet of Rick Astley (you’re welcome) to this draft post actually served as a proof-of-concept. In doing so I came across a handy new Chrome feature called picture-in-picture, which, while nice here, might have resulted in unusual behaviour in the blog-list and cover images, where the videos are being used behind text, for decoration and to supplement it – fortunately this can be disabled using the attribute disablePictureInPicture.
Encountering a strange issue with the video loading but not playing, I found out that Chrome blocks autoplaying videos if they aren’t muted – which is great. Since I don’t want sound here, and there’s not any in the videos, I added a muted="muted" attribute to join the others – autoplay and preload="auto" for those highlighted, loop and playsinline="true" for all,(note the lack of controls).
For smaller items in a list, I set preload to false, and added mouseenter and mouseleave listeners to the tag to stop and start the video when the user hovered over them. In this way, they will have to trigger a specific action to load a specific video after the page itself has loaded, which is more mobile-friendly. The result looks refined, and is a nice surprise.
The last awkward issues were to do with the initial paused snapshot of the video not rendering at the same resolution as the loaded video, but not giving any indication in the DOM as to why.
