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
Joao
Joao13mo ago
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_example
ramtam92
ramtam9213mo ago
Unfortunately 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) 🤷‍♂️
Joao
Joao13mo ago
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.
Want results from more Discord servers?
Add your server