Multiple Videos using Youtube API

1
votes

I was wondering that if I have a list of hyperlinks that each one is linked to a Youtube video and I have Youtube player API on the page

var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

the question is how to make videoId take variables? so if I have 10 links every time I click on a link the player display that video?

thanks

1
javascriptyoutube

1 Answers

0
votes

You do this with the YouTube IFrame Data API: https://developers.google.com/youtube/iframe_api_reference

You can use loadVideoById() or cueVideoById();

player.loadVideoById({
     videoId: videoId,
     startSeconds: startSeconds,
     endSeconds: endSeconds
   });