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
matchMediato toggle the value of the
srcattribute 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
matchMediato 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.