Multiple Youtube Videos using API in Modal and play on open

Question

I'm trying to maintain multiple Youtube Videos on a portfolio style website using the Youtube API. I want to have each video contained inside a modal so when the thumbnail is clicked, the modal opens and the video inside starts playing automatically.

I referenced this codepen to get multiple iframes by their ID and I used a click event and tied it to the modal close button to stop all instances of video playing. This stops any video from continuing to play once a modal is closed. But I can't figure out how to start playing each video on a per click basis.

Referenced Codepen: https://codepen.io/AliKlein/pen/WoNaoN

Building this site with Zurb Foundation

<div class="video-thumbnail">
  <div class="video-play show-in-overlay">
              <a data-toggle="featvideo">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" 
  viewBox="0 0 512 512"><path id="Video-Play" d="M96 64l320 192-320 
  192z"></path>
                </svg>
                </a>
  </div>
<div class="media-item-caption">
                    <h1 class="media-item-caption-title">Title</h1>
  <div class="media-caption-sub"><p>Caption</p>
  </div>
</div>
                <img src="Video1thumb.jpeg">
</div><!-- "video-thumbnail" -->


  <div class="full reveal" id="featvideo" data-reveal>
    <div class="responsive-embed widescreen reveal-content">
        <div id="player1">
             [IFRAME ENDS UP HERE]
        </div>
    </div>

 <button class="close-button" data-close aria-label="Close reveal" 
 type="button">
        <span aria-hidden="true">&times;</span>
 </button>
   </div>
<div class="video-thumbnail">
  <div class="video-play show-in-overlay">
              <a data-toggle="secondvideo">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" 
  viewBox="0 0 512 512"><path id="Video-Play" d="M96 64l320 192-320 
  192z"></path>
                </svg>
                </a>
  </div>
<div class="media-item-caption">
                    <h1 class="media-item-caption-title">Second 
Title</h1>
  <div class="media-caption-sub"><p>Second Caption</p>
  </div>
</div>
                <img src="Video2thumb.jpeg">
</div><!-- "video-thumbnail" -->


  <div class="full reveal" id="featvideo" data-reveal>
    <div class="responsive-embed widescreen reveal-content">
        <div id="player2">
             [SECOND IFRAME ENDS UP HERE]
        </div>
    </div>

 <button class="close-button" data-close aria-label="Close reveal" 
 type="button">
        <span aria-hidden="true">&times;</span>
 </button>
   </div>



</html>

<script>
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 playerInfoList = [{
id: 'player1',
height: '175',
width: '300',
videoId: 'dOy7vPwEtCw'
}, {
id: 'player2',
height: '175',
width: '300',
videoId: 'QWtsV50_-p4'
}, {
id: 'player3',
height: '175',
width: '300',
videoId: 'y-JqH1M4Ya8'
}, {
id: 'player4',
height: '175',
width: '300',
videoId: 'gH7dMBcg-gE'
}, {
id: 'player5',
height: '175',
width: '300',
videoId: '7wL9NUZRZ4I'
}, {
id: 'player6',
height: '175',
width: '300',
videoId: 'S4R8HTIgHUU'
}];

function onYouTubeIframeAPIReady() {
if (typeof playerInfoList === 'undefined') return;

for (var i = 0; i < playerInfoList.length; i++) {
    var curplayer = createPlayer(playerInfoList[i]);
    players[i] = curplayer;
}
}

var players = new Array();

function createPlayer(playerInfo) {
return new YT.Player(playerInfo.id, {
    height: playerInfo.height,
    width: playerInfo.width,
    videoId: playerInfo.videoId,
});
}

$('.close-button').click(function () {
  $(players).each(function (i) {
    this.stopVideo();
  });
 });
 </script>

Polemistis D'Gnosis Polemistis D'Gnosis · Accepted Answer · 2018-02-12T07:53:21

Okay, after searching nonstop I found a solution that is pretty bloated but works. I also found a way to reference multiple Youtube Videos in a way that wouldn't glitch. I had issues with the above code. So here is my solution, hope it helps someone. First: Reference a second player, third player, etc, like this:

var player1;
var player2;
  function onYouTubeIframeAPIReady() {
    player1 = new YT.Player('player1', {
      height: '706px',
      width: '1256px',
      videoId: 'sDfQLfjeM',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
            player2 = new YT.Player('player2', {
      height: '706px',
      width: '1256px',
      videoId: 'S4R8HTIgHUU',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

THEN. Use Foundation's Reveal Events to bind a specific reveal by ID to an event. In this case, playVideo(); and stopVideo(); like so:

$(document).on('closed.zf.reveal', '#exampleModal8', function () {
player1.stopVideo();
 alert("Close sesame!");
});
$(document).on('open.zf.reveal', '#exampleModal8', function () {
player1.playVideo();
alert("Open sesame!");
});
$(document).on('closed.zf.reveal', '#exampleModal7', function () {
player2.stopVideo();
alert("Colloportus!");
});
$(document).on('open.zf.reveal', '#exampleModal7', function () {
player2.playVideo();
alert("Alohmahora!");
});

The magic is right after 'open.zf.reveal' where you can specify the div being clicked to trigger the reveal. This allows you to target individual instances of the reveal and then tie it specifically to an individual player to start the video on open and stop on close. I hope this helps someone even though I saw a ton of related questions surrounding Bootstrap.

Multiple Youtube Videos using API in Modal and play on open

1 Answers