CODEWITHSUNDEEP
javascriptvideomedia-queries
kampfkuchen
kampfkuchen

Reputation: 484

Change multiple video sources according to screen size

I am trying to load different video files on my website using javascript according to the screen size the website is viewed with.

I found a great solution on stackoverflow: https://stackoverflow.com/a/54296142/4132369 (JSFIDDLE)

My problem is that I have about 10 videos on my website, therefore I tried to adapt the javascript code for multiple videos but I didn't manage.

What I have tried:

HTML

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

JAVASCRIPT

let w = window.matchMedia("(max-width: 700px)");
let vid1 = document.getElementById("vid1");
let vid2 = document.getElementById("vid2");
let vid3 = document.getElementById("vid3");
let source = document.createElement("source");
source.setAttribute("type", "video/mp4");
vid1.appendChild(source1);
vid2.appendChild(source2);
vid3.appendChild(source3);

if (w.matches) {
  vid1.pause();
  vid2.pause();
  vid3.pause();
  source.removeAttribute("src");
  source.setAttribute("src", "https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4");
  vid1.load();
  vid2.load();
  vid3.load();
  vid1.play();
  vid2.play();
  vid3.play();
} else {
  vid1.pause();
  vid2.pause();
  vid3.pause();
  source.removeAttribute("src");
  source.setAttribute("src", "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4");
  vid1.load();
  vid2.load();
  vid3.load();
  vid1.play();
  vid2.play();
  vid3.play();
}

window.addEventListener("resize", function() {
  let w = window.matchMedia("(max-width: 700px)");
  let vid1 = document.getElementById("vid1");
  let vid2 = document.getElementById("vid2");
  let vid3 = document.getElementById("vid3");
  let source = document.getElementById("hvid");

  if (w.matches) {
    vid.pause();
    source.src = "https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4";
    vid1.load();
    vid2.load();
    vid3.load();
    vid1.play();
    vid2.play();
    vid3.play();
  } else {
    vid1.pause();
    vid2.pause();
    vid3.pause();
    source.src = "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4";
    vid1.load();
    vid2.load();
    vid3.load();
    vid1.play();
    vid2.play();
    vid3.play();
  }
});

Here is the JSFIDDLE: https://jsfiddle.net/bL56fu20/


I would be very thankful for any kind of help!

Upvotes: 0

Views: 1258

Answers (1)

Juan Pe&#241;a
Juan Pe&#241;a

Reputation: 26

let videos = [
    "https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4", 
    "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
  ]

  function setVideoWithScreen(screen, element){
    element.setAttribute("type", "video/mp4");
    if(window.innerWidth < screen){
      element.removeAttribute("src");
      element.setAttribute("src", videos[0]);
      element.load();
    }else{
      element.removeAttribute("src");
      element.setAttribute("src", videos[1]);
      element.load();
    }
  }

  let el = document.getElementsByClassName('video')
  for (i = 0; i < el.length; i++) {
    setVideoWithScreen(700, el[i])
  }

  window.addEventListener("resize", function() {
    let el = document.getElementsByClassName('video')
    for (i = 0; i < el.length; i++) {
      setVideoWithScreen(700, el[i])
    }
  })

this is the solution I found

Upvotes: 1

Related Questions