I am using the YouTube Iframe as shown below. I want to make my player load on the click of a button instead as soon as the API loads.

I have created a system where a user of my website will be able to choose what videos will be loaded into the playlist, so I cannot hardcode the YouTube video IDs. Is it possible to make an onclick function that fires an event that loads the player? If so, how??

Thanks so much!!!

<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

  tag.src = "";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {    //CAN I REPLACE THE ONREADY EVENT WITH ONE
        'onReady': onPlayerReady, //THAT FIRES ONCLICK? 
        'onStateChange': onPlayerStateChange 
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.playVideo();
  }

I am using the YouTube Iframe as shown below. I want to make my player load on the click of a button instead as soon as the API loads.

I have created a system where a user of my website will be able to choose what videos will be loaded into the playlist, so I cannot hardcode the YouTube video IDs. Is it possible to make an onclick function that fires an event that loads the player? If so, how??

Thanks so much!!!

<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

  tag.src = "https://www.youtube./iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {    //CAN I REPLACE THE ONREADY EVENT WITH ONE
        'onReady': onPlayerReady, //THAT FIRES ONCLICK? 
        'onStateChange': onPlayerStateChange 
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.playVideo();
  }

• javascript
• jquery
• html
• youtube
• youtube-api

1 Answer 1

You can do something like code below

var tag = document.createElement('script');
tag.src = "https://www.youtube./iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var video_id = '' //Desired video ID
var player;
$('LOAD_BUTTON').on('click', function() {
  // Load player when LOAD_BUTTON is clicked
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: video_id,
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange 
    }
  });
});

function onPlayerReady(event) {
  $('PLAY_BUTTON').on('click', function() {
    // Play video when PLAY_BUTTON is clicked
    event.target.playVideo();
  });
}