Youtube API: Dynamic naming and looping

user_8721454 0
Viewed 147

I apologize in advance, I am not very good with scripting, so I hope this isn't too basic of a request.

I am in a situation where I need to have multiple looping clickable youtube video. I do not want to use the embeddable playlist looping option because it has a few seconds of black where it refreshes the video in the playlist, which in this case would be itself.

I found a few articles on here that show you how to do create multiple videos dynamically using a data attribute, and how to loop specific times within a youtube video, but when I try to combine these, I get an error, which I am assuming is a scope issue but have no idea how to fix. Below is my code, along with the links to each original fiddles.

The error I am receiving is: "Uncaught ReferenceError: players is not defined"

<div style="position: relative;display:block;width: fit-content;margin:0 auto;">
<a href="#"><div style="width: 100%;height:100%;position:absolute;"></div>
</a>

<div class="video-container">
<div data-id="YE7VzlLtp-4"></div>
</div>
</div>

<script src="https://www.youtube.com/iframe_api"></script>

<script>


function onYouTubeIframeAPIReady() {
    var players = document.querySelectorAll('.video-container div')
for (var i = 0; i < players.length; i++) {


    new YT.Player(players[i], {
    videoId: players[i].dataset.id,
    events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
            },
    playerVars: {
            'autoplay': 1,
            'loop': 1,
            'controls': 0,
            'showinfo': 0,
            'modestbranding': 1}
});
}
}



function onPlayerReady(event) {
loopStart();
players.playVideo();
}
function loopStart() {
players.seekTo(7);  // Start at 7 seconds
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
    setTimeout(loopStart, 5000); // After 5 seconds, restart the loop
}
}
</script>

Multiple Videos using Data Attribute Example: https://jsfiddle.net/nightcoregirl/jyha6xj5/

Looping Example: http://jsfiddle.net/pbosakov/Lo6gwtff/

Thanks in advance for any isight!

html5-video youtube-api javascript
1 Answers

Your specific issue is scope of variable players. players is not visible in onPlayerReady. To retrieve the player from event object, use event.target :

Javascript

function onYouTubePlayerAPIReady() {
  players = document.querySelectorAll('.video-container div')
  for (var i = 0; i < players.length; i++) {
    var player = new YT.Player(players[i], {
      videoId: players[i].dataset.id,
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      },
      playerVars: {
        'autoplay': 1,
        'loop': 1,
        'controls': 0,
        'showinfo': 0,
        'modestbranding': 1
      }
    });
  }
}

function onPlayerReady(event) {
  loopStart(event.target);
  event.target.playVideo();
}

function loopStart(player) {
  player.seekTo(7); // Start at 7 seconds
}

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING) {
    setTimeout(function() {
      loopStart(event.target);
    }, 5000); // After 5 seconds, restart the loop
  }
}

HTML

<script src="https://www.youtube.com/iframe_api"></script>
<div class="video-container">
  <div data-id="YE7VzlLtp-4"></div>
</div>
<div class="video-container">
  <div data-id="3IXKIVZ9T-U"></div>
</div>

Check this fiddle

user_26143640
Related