I can see 3 potential approaches here
Checking width of the page in CSS
Since your video have two differences classes , you could code something like this
.des-hidden{
display: none;
}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
.des-hidden{
display:none
}
.mob-hidden{
display: block;
}
}
BUT you'll have to change your HTML to something like this, to make it work
<video autoplay muted loop playsinline id="video-1" class="mob-hidden">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
<video autoplay muted loop playsinline id="video-2" class="des-hidden">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Checking width of the page in JS
You could use something like this changing your classes for IDs:
window.addEventListener("resize", function(event) {
if (document.body.clientWidth <= 768) {
document.getElementById("des-hidden").style.display = "none";
document.getElementById("mob-hidden").style.display = "block";
} else {
document.getElementById("des-hidden").style.display = "block";
document.getElementById("des-hidden").style.display = "none";
}
});
Checking device in Back-End
Depending on your backEnd, if you have one (PHP, Node.Js) , you could check for the user-agent, and decide to display one video or the other
You can look at this if you use PHP :
Simplest way to detect a mobile device in PHP
Or if you use NodeJs :
Identify if the request is coming from mobile or not
More details
On recent browser, using the display:none
CSS property will skip completely the file loading, meaning the video won't even get requested by the browser, saving both loading time and data usage
(See Does “display:none” prevent an image from loading?
Using a back-end solution could help to be sure the right video will receive the right video, preventing useless loading time, but it'll be harder for your page to adapt if the width of the page changes after the loading
So I recommend using the CSS option if you don't want to deal with Ajax or nodeJs asynchronsism