CODEWITHSUNDEEP
javascriptyoutube-api
Steven_Harris_
Steven_Harris_

Reputation: 1121

YouTube API - Dynamically add event listeners

I'm using the Youtube API to restyle embedded videos which are dynamically added to the page.

I'm having trouble figuring out how to set up the custom controls. Each video embed has a custom control which needs to fire the playVideo() function on the relevant embed.

When each player is initialised it fires the onPlayerReady function. My problem is I don't know how to bind a click event to the new players custom button which will fire the playVideo() function for the correct player.

I've done a lot of searching on here and can't find reference to working with multiple embeds.

FINAL UPDATE

As jQuery is available, i'm using it in this solution...

function onPlayerReady(event) {
  // bind events
  var playButton = $(event.target.c).parent().find('.immersive-video__play');
  playButton.on('click', function() {
    event.target.playVideo();
  });
}

UPDATE

This is my current working solution...

var buttonCount = 0;

function onPlayerReady(event) {
  // bind events
  var playButtons = document.getElementsByClassName("immersive-video__play");
  playButtons[buttonCount].addEventListener('click', function() {
    event.target.playVideo();
  });

  buttonCount++;
}

ORIGINAL

function onPlayerReady(event) {
  // bind event
  var playButtons = document.getElementsByClassName("immersive-video__play");

  // I don't know how to link the button to the player?
  playButtons[].addEventListener('click', function() {
      player[].playVideo();
  });

}

var player = [];

function checkYT() {
  var check = setInterval(function() {
    if (typeof YT !== 'undefined' && typeof YT.Player !== 'undefined') {
      var tar = document.getElementsByClassName('immersive-video__embed');

      for (var i = 0; i < tar.length; i++) {
        var id = tar[i].dataset.video;
        var container = document.getElementsByClassName('video-holder');
        player[i] = new YT.Player(container[i], {
          videoId: id,
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      clearInterval(check);
      return;
    } else {
      console.log('not ready');
    }
  }, 20);
}

Upvotes: 2

Views: 3263

Answers (1)

abielita
abielita

Reputation: 13469

Make sure that the iframe src URL has ?enablejsapi=1 at the end like this:

<iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video"></iframe>

Setting the parameter's value to 1 enables the player to be controlled via IFrame or JavaScript Player API calls. The default value is 0, which means that the player cannot be controlled using those APIs.

Check your Player object which has the ability to control that video. Create it using the id attribute on that iframe. Here is an example from this tutorial:

var player;

function onYouTubePlayerAPIReady() {
  // create the global player from the specific iframe (#video)
  player = new YT.Player('video', {
    events: {
      // call this function when player is ready to use
      'onReady': onPlayerReady
    }
  });
}

Then check the "player ready" callback and bind events. It will automatically be passed the event object, in which event.target is the player.

function onPlayerReady(event) {

  // bind events
  var playButton = document.getElementById("play-button");
  playButton.addEventListener("click", function() {
    player.playVideo();
  });

  var pauseButton = document.getElementById("pause-button");
  pauseButton.addEventListener("click", function() {
    player.pauseVideo();
  });

}

Hope this helps!

Upvotes: 1

Related Questions