jquery - 在Modal中使用API​​播放多个Youtube视频，并在露天播放

我正在尝试使用Youtube API在投资组合风格的网站上维护多个YouTube视频。我希望每个视频都包含在模态中，因此当单击缩略图时，模态会打开，并且内部的视频会自动开始播放。

我引用了此代码笔来通过其ID获取多个iframe，并使用了click事件并将其绑定(bind)到模式关闭按钮以停止所有视频播放实例。一旦关闭模式，这将阻止任何视频继续播放。但是我不知道如何按点击开始播放每个视频。

引用的代笔:https://codepen.io/AliKlein/pen/WoNaoN

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

最佳答案

好吧，在不停地搜索之后，我发现了一个非常that肿但可行的解决方案。我还找到了一种不会毛刺的方式引用多个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绑定(bind)到事件。在这种情况下，playVideo();和stopVideo();像这样:

$(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。这样，您就可以定位广告展示的各个实例，然后将其专门与单个播放器绑定(bind)，以在打开时开始播放视频，并在关闭时停止播放。我希望这对某人有帮助，即使我看到了有关Bootstrap的大量相关问题。

关于jquery - 在Modal中使用API​​播放多个Youtube视频，并在露天播放，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48740320/