Building A Better Video Banner

So I made this thing. Clients and colleagues often ask me for "video hero banners". I guess they are really sexy and engaging or something. While desktop is never usually an issue, I have often recommended alternative experiences for mobile to avoid performance issues. Static image fallback usually, and on rare occasions—a carousel to stand in as a video banner, which may be even worse than just loading a video on mobile to begin with, as you now have to maintain two different experiences, which is very messy to do. So I asked myself, what if we could create a video banner that was more performance friendly (and accessible, of course)? Maybe it could even be similar to the picture element? Initially, I checked to see if the video element supported the media attribute, so that I could load different video sources at different viewport widths, but this turned out not be supported in browsers, so I had to roll my own with JavaScript (Plain Vanilla). Turns out it is not that hard to do! Here is what I did:

• Used matchMedia to toggle the value of the video element's src attribute at different screen widths. The smaller viewport gets the smaller sized video. Eventually, I would like to see what the Network Information API has to offer to improve things.
• Added pause functionality that sticks from page to page. If movement is troubling to an individual, then that is something they will probably want to eliminate on all pages throughout a site.
• Added support for prefers-reduced-motion. Here we are using matchMedia to detect this user preference.

Behold the fruits of my labor! I give you the...Video Hero Banner!

Yes, I know it is not a very original name, but what can I tell you? Naming things is hard sometimes!

Feel free to visit the repo for more details.

Enjoy!