CODEWITHSUNDEEP
javascriptjqueryyoutubeyoutube-apiyoutube-iframe-api
Rachel Smiths
Rachel Smiths

Reputation: 155

YouTube iframe Player API: control MULTIPLE iframe players that are already in the HTML

I know this question has been asked before. However, the answer is out of date and I also need additional info for multiple iframe players.

I followed the code from Google Developers website. However, when I tried to call event.target.playVideo();, inside onPlayerReady(event) function, the video didn't play when the page first loaded.

I also got this error message GET https://i.ytimg.com/vi_webp/M7lc1UVf-VE/sddefault.webp?v=516f0b27 404

Right now I'm showing the example of 2 videos and Play video 1, Stop video 1, Play video 2, and Stop video 2 work. When there're are many videos, how do I set up the code so it's more compact to embed them? Thank you for your help.

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

var player1;
var player2;

function onYouTubeIframeAPIReady() {
  	
  player1 = new YT.Player('existing-iframe-example1', {
    events: {
      'onReady': onPlayerReady1
    }
  });

  player2 = new YT.Player('existing-iframe-example2', {
    events: {
      'onReady': onPlayerReady2
    }
  });

}

function onPlayerReady1(event) {
  event.target.playVideo();

  $(function() {
	
    $('#play-btn1').on('click', function() {
      event.target.playVideo();
    });

    $('#stop-btn1').on('click', function() {
      event.target.stopVideo();
    });

  });
}


function onPlayerReady2(event) {
  event.target.playVideo();
	
  $(function() {

    $('#play-btn2').on('click', function() {
      event.target.playVideo();
    });

    $('#stop-btn2').on('click', function() {
      event.target.stopVideo();
    });

  });
}
.control { margin-bottom: 30px; }
.play-btn, .stop-btn { display: inline-block; margin: 10px 20px; color: blue; cursor: pointer; }
.play-btn:hover, .stop-btn:hover { color: orange; cursor: pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<iframe id="existing-iframe-example1" width="640" height="360" frameborder="0" allowfullscreen src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&enablejsapi=1&controls=1&rel=0&color=white"></iframe>

<div class="control">
  <div id="play-btn1" class="play-btn">Play video 1</div>
  <div id="stop-btn1" class="stop-btn">Stop video 1</div>
</div>


<iframe id="existing-iframe-example2" width="640" height="360" frameborder="0" allowfullscreen src="https://www.youtube.com/embed/5a2oZwB6zX0?autoplay=1&enablejsapi=1&controls=1&rel=0&color=white"></iframe>

<div class="control">
  <div id="play-btn2" class="play-btn">Play video 2</div>
  <div id="stop-btn2" class="stop-btn">Stop video 2</div>
</div>

Upvotes: 1

Views: 486

Answers (1)

abielita
abielita

Reputation: 13469

Based from this thread, this is expected. What we do is actually try to load sddefault.jpg, if that failed we fallback to hqdefault.jpg which should exist for all videos. Also from this link, if the video does not have a max resolution image, you will get a 404 error for the maxresdefault.jpg URL.

Upvotes: 1

Related Questions