CODEWITHSUNDEEP
javascriptapivideoyoutube
user4867900
user4867900

Reputation:

Youtube API multiple videos with events

Dear Community!

I want to show multiple videos on my website. The speakers should be deactivated by default (i use the mute()-function).

And the videos should start to play automatically when the user scrolls and the videos come into the browser viewport.

I built this with one single video- worked like a charm. But not with multiple Vidoes on one site..

please help what do i miss in my Code?

This ist html-Part: 

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

<div class="video-container">
<div data-id="3IXKIVZ9T-U"></div>
</div>

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

This ist the js-Part:

function onYouTubePlayerAPIReady() {

var players = document.querySelectorAll('.video-container div')

for (var i = 0; i < players.length; i++) {
    new YT.Player(players[i], {
        width: 600,
        height: 400,
        videoId: players[i].dataset.id, 
         events: {
         onReady: initialize
        }


    });
}
}

function initialize(){

players[i].mute(); // I know that players[i] is wrong..

var waypoints = jQuery('.video-container').waypoint(function() {


    if( players[i]) { // I know that players[i] is wrong..
       var fn = function(){ 
        players[i].playVideo();  // I know that players[i] is wrong..
       }
       setTimeout(fn, 1000);
    }

}, {
  offset: '50%'
})
}

So the videos show up on my site but i do not have an idea how to add these events to each single video? What am i doing wrong

(a lot i guess ;( ....)

Thank you!

Melanie

Upvotes: 0

Views: 6489

Answers (1)

stewo
stewo

Reputation: 454

Hej Milenoi,

your players variable is a nodeList of the divs you query - and does not contain the addressable YouTube elements. You have to assign those youtube player objects to some place to address them. (Or there might be some other magic to find them?)

Have a look at my bin here: http://jsbin.com/hozaluzaho It is a working setup - when you scroll down, you will trigger the other players. You can have a look at how I created the needed objects and so on.

// get .player nodes
var playerDivs = document.querySelectorAll(".player");

// nodelist to array to use forEach();
var playerDivsArr = [].slice.call(playerDivs);

var players = new Array(playerDivsArr.length);
var waypoints = new Array(playerDivsArr.length);

// when youtube stuff is ready
function onYouTubeIframeAPIReady() {

  // create yt players
  playerDivsArr.forEach(function(e, i) { // forEach ...
    players[i] = new YT.Player(e.id, {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: { /* no events set */ }
    })
  })

  // create waypoints
  $(".player").each(function(i, e) {
    waypoints[i] = new Waypoint({
      element: e,
      handler: function() {
        players[i].playVideo();
      }
    })
  });

}

EDIT ADDITION:

Hej again,

No worries, The initialize function needs to iterate over the array with the many youtube player objects, you are just talking to one player variable in your initialize function (which might not even be set when you followed my code?). Look at the place where it says create yt players above. You see that each slot of the array players[] gets stuffed with a player-object. Then you have to talk to each of them again to tell them .mute(). In the forEach loop the current object from the array is handed over to the yt variable.

function initialize() {
  players.forEach(function(yt, i) {
    yt.mute();
  });
}

another bin: http://jsbin.com/ficoyo/edit?html,output

cheers!

Upvotes: 3

Related Questions