ARTICLE AD BOX
I have a video, which has to play different sources on mobile and desktop. For that, I'm using the html video with two sources to be able to switch the video depending on the viewport. The switch works fine in my browser on my Macbook, but it is not working in my browser on my smartphone device (iPhone). I've tried also to add a third source tag with a min-width but doesn't also work as expected. Any ideas?
<video controls autoplay playsinline muted loop>
<!-- Mobile -->
<source src="https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4"
type="video/mp4"
media="(max-width: 500px)"
>
<!-- Desktop -->
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
type="video/mp4"
media="(min-width: 501px)"
>
<!-- Fallback -->
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
type="video/mp4"
>
</video>
