Member-only story

Improving My HTML Video Facades

Jason Knight
CodeX
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:

  1. More than one video source, we’ll add Vimeo in addition to our existing youtube.
  2. Auto detecting / extracting the video token from the anchor’s HREF
  3. Determining video source from anchor href’s domain
  4. Different style for different video sources
  5. Show off “aspect-ratio” working.
  6. Use an object lookup for the unique parameters of the different iframe formats used by different video sources.
  7. Reduce / clean up the markup by using one anchor, and having the iframe creation be triggered by a JS generated <button>
  8. 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.
  9. Use <header> for the video title and overlay it atop the poster.
  10. 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:

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

CodeX
CodeX

Published in CodeX

Everything connected with Tech & Code. Follow to join our 1M+ monthly readers

Jason Knight
Jason Knight

Written by Jason Knight

Accessibility and Efficiency Consultant, Web Developer, Musician, and just general pain in the arse

Responses (1)

What are your thoughts?