CODEWITHSUNDEEP
htmlvideoresponsive
avr.web
avr.web

Reputation: 63

Provide a different video depending on the screen size HTML

I would like to use a video as a background in a website, but I would like to provide a smaller a clipped version so mobile phones don't have to download full version and waste bandwidth. How could I do it?

I've tried the following, but the browser downloads both before showing only one. I would like the browser to download only one video

<video controls>
    <source src="b.mp4" type="video/mp4" media="screen and (max-width: 800px)">
    <source src="a.mp4" type="video/mp4" media="screen and (min-width: 801px)">
</video>

Thanks in advance

Upvotes: 6

Views: 4915

Answers (2)

Nikhil Sawant
Nikhil Sawant

Reputation: 402

Since there´s no other way to show/hide video at different resolutions, you can use JS or jQuery, try this solution (modify it according to your need)

var video = $('#yourVideoId');
    
var width = $(window).width();

if (width < 1200) {
    //It is a small screen
    video.src="yourVideoSrc_Small.mp4";
} 
else 
{
    //It is a big screen or desktop
    video.src = "yourVideoSrc_Big.mp4";
}

video.type = "video/mp4";
video.load();

Upvotes: 1

VC.One
VC.One

Reputation: 15916

See if this example code below is doing what you want.
It uses JavaScript to check the device's screen.width and set's a URL for the <video> tag according to size. The video tag is accessed by its id. As a starting point, it has a fake/empty URL (later updated by code).

<!DOCTYPE html>
<html>
<body>

<video id="myvid" controls>
    <source src="nothing.mp4" type="video/mp4">
</video>

</body>

<script>

window.onload = (event) => { myFunction( event ) };

function myFunction( event ) 
{
  alert("Screen Width is: " + screen.width);
  
 let myvid = document.getElementById("myvid");
 
 //# if BIGGER THAN the 800 pixels
 if ( screen.width > 800 ) { myvid.src = "a.mp4"; }
 
 //# if SMALLER THAN or EQUAL-TO the 800 pixels
 if ( screen.width <= 800 ) { myvid.src = "b.mp4"; }
 
 //# load URL (for playback)
 myvid.load();
  
}

</script>

</html>

Upvotes: 1

Related Questions