Search code examples
javascripthtmljqueryiframeintersection-observer

Only Play iframe Video when iframe has a certain class

I am trying to make a webpage where videos only play when they are in the viewport and pause when they are out of the viewport.

To do this, I have used Intersection Observer to determine whether the iframe is in the viewport or not. If the video is in the viewport, it gets a class of "show". This functionality seems to be working

How do I now only play the iframes which have a class of "show"? At the moment, I only have a console.log function.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="/styles/styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.xx.x/js/uikit.min.js"></script>
  </head>
  <body>
    <div class="inner">
    <div class="container">
        <div class="innercontainer">
    <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>
</div>
  </div>
  <div class="videocontainer">
    <div>
   <iframe id="video1" src="https://player.vimeo.com/video/757127483?background=true" width="920" height="200" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
    <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>
    <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>
    <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>
    <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>
    <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>
   <iframe id="video2" src="https://player.vimeo.com/video/807516670?background=true" width="920" height="200" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
   <p>
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
  </div>
  </div>
    </div>
    <img>
    <script src="index.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://player.vimeo.com/api/player.js"></script>
    <script>
var players = []
$("iframe").each((index) => {
  players.push({
    player: new Vimeo.Player($("iframe").get(index)),
    top: $("iframe").eq(index).position().top,
    status: "pause",
  });
});

if(!!window.IntersectionObserver){
  let observer = new IntersectionObserver((entries, observer) => { 
    entries.forEach(entry => {
    if(entry.isIntersecting){
      entry.target.classList.toggle("show", entry.isIntersecting)
      console.log(entry.target);
    }
    });
  }, {rootMargin: "0px 0px -200px 0px"});
  document.querySelectorAll('iframe').forEach(iframe => { observer.observe(iframe) });
}

else document.querySelector('#warning').style.display = 'block';


    </script>
  </body>
Solution

  • You are somewhat on the right track. However, I think you are overcomplicating it a bit. Instead of playing the video on "show" you can simply call the "play" method from the Vimeo object.

    I have never used the Vimeo API, but it seems quite powerful, so maybe there is a method that can do this for you out of the box.

    I would suggest having a closer look at the documentation and also consider to simplifying your code a bit. I tried to do a quick implementation that works for one video. With inspiration from that and reading the documentation, I think you should be able to get it working.

    <div id="made-in-ny"></div>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>

const videoOptions = {
   id: 59777392,
   width: 640,
   loop: true
};

const player = new Vimeo.Player('made-in-ny', videoOptions);
const target = document.querySelector('#made-in-ny');

const handleIntersection = (entries) => {
  entries.map((entry) => {
  
    if (entry.isIntersecting) {
      player.play().then(() => {
        console.log('Video is playing');
      });
    } else {
      player.pause().then(() => {
        console.log('Video is paused');
      });
    }
    
  });
}

const observer = new IntersectionObserver(handleIntersection);
observer.observe(target);

</script>

    See working example: https://jsfiddle.net/3n9vsuyd

    For multiple videos

    To make it work for multiple videos then a simple option could be to wrap the code in a function and then loop through an array of the videos that you want to create.

    <div id="made-in-ny"></div>
...
<div id="made-in-ny2"></div>


<script src="https://player.vimeo.com/api/player.js"></script>
<script>

const videoPlayer = (videoOptions, videoId) => {
  const player = new Vimeo.Player(videoId, videoOptions);
  const target = document.querySelector('#' + videoId);

  const handleIntersection = (entries) => {
    entries.map((entry) => {

      if (entry.isIntersecting) {
        player.play().then(() => {
          console.log(videoId + ' is playing');
        });
      } else {
        player.pause().then(() => {
          console.log(videoId + ' is paused');
        });
      }

    });
  }

  const observer = new IntersectionObserver(handleIntersection);
  observer.observe(target);
}

const videoOptions = {
   id: 59777392,
   width: 640,
   loop: true
};

const videoList = [
    { 
    videoOptions, 
    videoId: 'made-in-ny',
  },
    { 
    videoOptions, 
    videoId: 'made-in-ny2',
  },
];

videoList.forEach((video) => {
    videoPlayer(video.videoOptions, video.videoId);
});


</script>

    https://jsfiddle.net/dpgm45wh/23/

    Hope it helps a bit.