Automatically adjust video display based on media size

Question

I plan to run a background video on a web page and I have different video files for mobile and desktop. I

<video autoplay loop muted playsinline>
  <source src="desktop.mp4" type="video/mp4">
  <source src="desktop.webm" type="video/webm">
  <img src="fallback.jpg" >
</video>

I've seen a solution for media queries, but as far as I understand it's outside the specification and not supported by iOS/Safari.

Answer 1

You can use media queries to use src or other content based on its definition. Check out this article on CSS-Tricks: https://css-tricks.com/video-source-by-screen-size/ However, it looks like this isn't a stable feature on all browsers.

<video controls> 
   <source src="video-small.mp4" type="video/mp4" media="all and (max-width: 480px)"> 
   <source src="video-small.webm" type="video/webm" media="all and (max-width: 480px)"> 
   <source src="video.mp4" type="video/mp4"> 
   <source src="video.webm" type="video/webm"> 
</video>

As mentioned in the article, another method is to use JavaScript to change the src of the video based on the viewport size.