Member-only story
Improving My HTML Video Facades
Published in
12 min readMay 19, 2023
I explained why we want to use facades when possible, and how to implement a basic one. Based on feedback to those articles and some things I mentioned, let’s up our game and do it better.
I will be adding the following things:
- More than one video source, we’ll add Vimeo in addition to our existing youtube.
- Auto detecting / extracting the video token from the anchor’s HREF
- Determining video source from anchor href’s domain
- Different style for different video sources
- Show off “aspect-ratio” working.
- Use an object lookup for the unique parameters of the different iframe formats used by different video sources.
- Reduce / clean up the markup by using one anchor, and having the iframe creation be triggered by a JS generated
<button>
- Apply the poster as a background-image instead of image, so we have just the title and link in the markup. This will prevent FOUC — Flash Of Unstyled Content — for a more professional look.
- Use <header> for the video title and overlay it atop the poster.
- When we start the video load, delete the outer DIV’s content, plugging the iframe into their place. This makes applying the poster smoother/cleaner.
Let’s See It First
Before we get carried away explaining the code, here’s a pen of the final product: