if we have 2 separate videos on a website (desktop.mp4 ; and mobile.mp4) I can think of two different approaches to hide and show them.
We create 2 separate HTML Video tags, and hide and show them via media queries and the display:none property.
Or we can just have one video tag and replace the source dynamically with JS, based on the screen size.
What are your thoughts?
Initially I thought, the JS approach would be better performance wise. Alot of people + chatGPT seem to agree that the hidden videos will still download in the background.
However, I can't confirm that behaviour in my network tab. Even video tags with autoplay, will not start playing (or download the video) until they become visible.
(Only the small HTML element is loaded, but not the large video file itself)
So now I'm wondering if just using media queries, would actually be the cleaner approach.
Could this rather be an issue on older browsers?
Appreciate any input. :-)
If there is display: none the browser should render the page as the element would not exist.
Display:none for video element, will it still be buffered?
There is also a preload attribute for the video tag. You can find more infos here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video?retiredLocale