I work with a few clients who have Hero video headers. To avoid loading @media display, where it still loads both videos (but showing the video matching the responsive size), I’ve been adding manual javascript to load THIS FILE for SCREEN SIZE, else THIS FILE. It’s saving a lot of bandwidth!
I was thinking that it’d be nice to have something like a “Responsive Loading” element that was purely an element where you dropped in other elements for various screen sizes.
Ideally, this would be really nice if it was built into the existing elements. Where, if we used X video for Desktop background, Y video for Tablet background, & Z video for Mobile background, it would ONLY load/download that video for that screen size.
I’m assuming this is a pretty obvious feature, so there must be some complications to add this functionality to existing elements. I was trying to figure out the easiest way to build out this upcoming project (where there are several video headers for numerous pages) and this type of element came to mind.
Hopefully that makes sense!