responsive videos, loaded based on view port width
I'm trying to find the best possible way to add responsive videos to the background of my site. I would have loved to use something like srcsets for the picture element but as far as I see, thats not a thing yet. Are there any css native options to do responsive videos – loading different videos for different view port sizes? or would I need to go down the javascript road for something like that?
3 Replies
I think it's possible in the same way but using
<source> element instead:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#video_with_media_attribute_exampleUnfortunately its not, I have checked. Chrome removed the media="" option from the video tag. Even though its mentioned here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#video_with_media_attribute_example its not working in all chromium browsers (chrome, arc, ect) 🤷♂️
Chromium is becoming IE ?? 🤔
In that case maybe you have to use some JavaScript to load it. You can still load a responsive image as a thumbnail for the video and use something like IntersectionObserver to determine the right source of the video when it appears on the viewport.