Changing <Video> src based on screen size with Javascript

Question

I'm testing on building a site locally on my machine using bootstrap.

I have a <video> sort of as the header of the site.

I would like this video to show the full width and height on mobile, and show a cropped/wide version of the video on desktop. I tried using inline media queries in the <source> tags, so that the src would change but nothing would work.

So I switched gears and used some javascript to change it that way.

So the crazy thing is, it seems my script works. When I look in chrome dev tools, the srcdoes in fact change when I resize my browser screen, however, it does not reflect on the site itself, it keeps whatever src I set it to in the html, as if it is ignoring my script.

I have tried everything I could think of, and I'm just stuck, not sure how to go about it any further. My code is below:

HTML

<video class="col-12" loop muted autoplay >
  <source id="hvid" src="media/test.mp4" type="video/mp4">
</video>

JS

let homeVideo = document.getElementById('hvid')
console.log(homeVideo.src)


function myFunction(x) {
  if (x.matches) { // If media query matches
    homeVideo.src = "media/test.mp4";
  } else {
   homeVideo.src = "media/test-3.mp4";
  }
}

var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
;
console.log(homeVideo.src)

-Edits-

JS

var w = window.matchMedia("(max-width: 700px)");
 var vid = document.getElementById("vid");
 var source = document.getElementById("hvid");


window.addEventListener("resize", function screenres(){
  if (w.matches) {
    vid.pause();
    source.src = "media/test.mp4";
    vid.load();
    vid.play();
  } else {
    vid.pause();
    source.src = "media/test-3.mp4";
    vid.load();
    vid.play();
  };

});

HTML

  <div class="container">
      <div class="row">
          <video id="vid" class="col-12" loop muted autoplay>
            <source id="hvid" src="media/test.mp4" type="video/mp4">
          </video>
        </div>
    </div>

Answer 1

Just get the viewport size, and based on that value, pause the video, change the src link, load the new video and play the new video.

But do note that you will need to refresh the page after changing the browser size to see the video change.

If you want the video to change whenever the screen resizes as well as on page refresh, you will first need to move the above JavaScript to a function and run it when a resize event is fired. Then, for the page load, you need to remove the video element from your HTML and add it on page load using the createElement() method with the src attribute value also added depending on the viewport width.

---

Check this JSFiddle or run the following Code Snippet for a practical example of what I have described above:

/* JavaScript */

  var w = window.matchMedia("(max-width: 700px)");
  var vid = document.getElementById("vid");
  var source = document.createElement("source");
  source.id = "hvid";
  source.setAttribute("type", "video/mp4");
  vid.appendChild(source);
  
  if (w.matches) {
    vid.pause();
    source.removeAttribute("src");
    source.setAttribute("src", "https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4");
    vid.load();
    vid.play();
  } else {
    vid.pause();
    source.removeAttribute("src");
    source.setAttribute("src", "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4");
    vid.load();
    vid.play();
  }

window.addEventListener("resize", function(){
  var w = window.matchMedia("(max-width: 700px)");
  var vid = document.getElementById("vid");
  var source = document.getElementById("hvid");
  
  if (w.matches) {
    vid.pause();
    source.src = "https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4";
    vid.load();
    vid.play();
  } else {
    vid.pause();
    source.src = "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4";
    vid.load();
    vid.play();
  }
});

/* CSS */

html, body {margin: 0; padding:0; width: 100%; height: 100%;}.row{display: block !important;}

<!-- CDN Links -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<!-- HTML -->

<div class="container">
  <div class="row">
    <video id="vid" class="col-12" loop muted autoplay></video>
  </div>  
</div>