3

In my website there is page with many videos. The videos should autoplay when the iframe video is completely visible in the viewport. When the videos move above the viewport means, the video should pause as we are seeing in facebook.

Note: I'm using iframe, but not html5 video element.

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
yasarui
  • 6,209
  • 8
  • 41
  • 75

2 Answers2

2

Although SO is not the place to request code, I will answer that because of the challenge and for other people who need the idea.

So, I'm using jquery.inview plugin to detect when the iframe are in the viewport.

Also, I'm using youtube api to control the video's iframe.

It's not easy to explain how each line works so read the code and if you will have a question, please comment.

Here is the full code (It's not working on this site because of security reason so you can see the live in http://output.jsbin.com/soqezo)

// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


var players = [];
function onYouTubePlayerAPIReady() {
  $('iframe').each(function() {
    var ifr = $(this),
        player = new YT.Player(ifr[0].id);

    ifr.data('player', player);
    players.push(player);
  });

  initInView();
}

function pausePlayers() {
  for (var i in players) {
    players[i] && players[i].pauseVideo && players[i].pauseVideo();
  }
}

function initInView() {
  $('div').each(function() {
    $(this).on('inview', function(event, isInView) {
      if (isInView) {
        // element is now visible in the viewport
        pausePlayers();
        var player = $(this).find('iframe').data('player');
        if (player) {
          player.playVideo && player.playVideo();
        }
      } else {
        // element has gone out of viewport
        //$(this).find('iframe').data('player').pauseVideo();
      }
    });
  });
}
html, body, div {
  height:100%;
}

div {
  width:100%;
  height:100%;
  background:red;
  margin-bottom:100px;
}

iframe {
  width:100%;
  height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.inview/0.2/jquery.inview.min.js"></script>

<div>
    <iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video1"></iframe>
</div>
<div>
    <iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video2"></iframe>
</div>
<div>
    <iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video3"></iframe>
</div>
<div>
    <iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video4"></iframe>
</div>
<div>
    <iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video5"></iframe>
</div>
Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
2

You can achieve the same effect using

iframe.contentWindow.postMessage(message, origin);

without using YouTube's Player API. Check out the link below for the live demo:

https://codepen.io/mcakir/pen/JpQpwm

NOTE: The live demo supports play/pause iframe videos from Youtube, vimeo and dailymotion (more will be added soon) without using any player's libraries or SDK's

Must Ckr
  • 310
  • 2
  • 5
  • videos in stored in S3 don't seem to respond, would you have a suggestion there? – aug2uag Mar 09 '18 at 23:53
  • 1
    @aug2uag the method i suggested here is only valid for loading videos from popular video-providers by iframe (embed). I don't understand what you meant by "videos stored in S3" – Must Ckr Mar 12 '18 at 07:12
  • yes you are correct, i meant amazon web services simple storage service (S3); if i replace the source of the iframe to point at a mp4 file stored in S3 it is not responsive to the 30%-on / 70%-off that the others are – aug2uag Mar 12 '18 at 22:42