多个 Youtube 视频在 Modal 中使用 API 并在打开时播放

Question

我正在尝试使用 Youtube API 在投资组合风格的网站上维护多个 Youtube 视频。我想让每个视频都包含在一个模态中，这样当单击缩略图时，模态就会打开，并且里面的视频会自动开始播放。

我引用了这个 codepen 来通过它们的 ID 获取多个 iframe，我使用了一个 click 事件并将其绑定到模态关闭按钮以停止所有视频播放实例。一旦模式关闭，这将阻止任何视频继续播放。但我不知道如何在每次点击的基础上开始播放每个视频。

参考 Codepen：https://codepen.io/AliKlein/pen/WoNaoN

使用 Zurb 基金会构建此网站

<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>

Answer 1

好的，在不停地搜索之后，我找到了一个非常臃肿但有效的解决方案。我还找到了一种以不会出现故障的方式引用多个 Youtube 视频的方法。我对上面的代码有问题。所以这是我的解决方案，希望对某人有所帮助。 第一：引用第二个玩家，第三个玩家等，像这样：

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
      }
    });
  }

那么。使用 Foundation 的 Reveal Events 通过 ID 将特定的 Reveal 绑定到事件。在这种情况下，playVideo();和停止视频（）；像这样：

$(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!");
});

魔法就在“open.zf.reveal”之后，您可以在其中指定被点击的 div 以触发显示。这使您可以针对显示的各个实例，然后将其专门绑定到单个播放器，以在打开时开始视频并在关闭时停止。我希望这对某人有所帮助，尽管我看到了大量与 Bootstrap 相关的问题。