Member-only story
Accessible HTML Video “Facades”
One of the biggest problems in building fast loading websites is that a lot of times you’re stuck using third party assets that are — to be brutally frank — utter and total shite. Topping the list of such code is anything Google related.. and by extension that means YouTube.
NOTE, I’ve written a followup to this which better explains WHY you would want to do this.
https://deathshadow.medium.com/better-explaining-the-reason-for-video-facades-f774d9795c03
It’s almost comedy gold that in both PageSpeed insights and Google Lighthouse you actually get penalized for using Google Fonts, Google Analytics, Google AdSense, and even the official <iframe> code of YouTube videos.
Though I admire their honesty in creating a tool that admits their own code and techniques are a hot wet mess. Unlike certain websites I could mention that would special-case that out. if (user === "elon") if you know what I'm saying. We could chalk this up to the left hand not knowing what the right is doing, if not for the fact it’s been this way since lighthouse launched, a lot of site owners and developers constantly gripe about it, and they’ve taken no “corrective action” to either kill off lighthouse as quick as it launched, or again modify it to ignore their own failings.
That they’ve done neither of those things makes Google feel slightly less evil than our other corporate overlords. This lack of “sinister” and / or duplicitous behavior is why I think a number of their other projects failed.
But most importantly when they ding us for things like YouTube <iframe> video embeds they tell us exactly what to use instead: A “Facade”
So What Is A Video Facade?
Just as the facade on a building is a decorative covering used to hide the structure, a video facade is a front end used to delay or hide loading the actual code used to load the video. At its simplest you have the poster image for the video that when clicked you use JavaScript to replace the image with the iFrame. This stops the <iframe> from wasting time loading all its resources delaying your local page, or wasting time/effort when the user might not even watch it. It can save you a ton of bandwidth, and transforms your overall load time and “time to…
