Youtube api 自动播放YouTube视频与基础6揭示情态动词

我搜索了又搜索，但只能找到关于这类事情的非常老的帖子。我要做的是创建多个基础6揭示模式，打开YouTube视频，将自动播放，并停止视频/音频时关闭模式。 这里是一个基本设置。任何帮助都会很好

<p><a data-open="videoModal-01">Click me for a modal 01</a></p>
<p><a data-open="videoModal-02">Click me for a modal 02</a></p>

<!-- modal 01 -->
<div class="reveal" id="videoModal-01" data-reveal>
  <div class="responsive-embed">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/4krs7z2bjlE" frameborder="0" allowfullscreen></iframe>
  </div>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<!-- modal 2 -->
<div class="reveal" id="videoModal-02" data-reveal>
  <div class="responsive-embed">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/c8aFcHFu8QM" frameborder="0" allowfullscreen></iframe>
  </div>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

---

我会通过JS创建discover modals，并用于创建、加载、启动和停止视频。这里是一个部分原型，让您开始（它缺少播放器功能）

var$dialog=$（'revealdialdialog'）；
如果（$dialog.length==0）{
//初始化对话框
$dialog=$（''）；
新基金会。
//附加到要加载的对话框关闭按钮
$（文档）。在（'单击'，'上。按钮对话框关闭'，函数（）{
//停止播放器，例如播放器。停止视频（）；
$dialog.foundation（'close'）；
返回false；
});
}
//设置对话框的内容
$（'#revealDialogContent'）.html（'×；'）；
//创建玩家并在就绪事件中播放
//player=新的YT.player（'player'。。。。。
//显示它模态
$dialog.foundation（'open'）；
我会通过JS创建discover modals，并用于创建、加载、启动和停止视频。下面是一个部分原型，让您开始使用（它缺少播放器功能）

var$dialog=$（'revealdialdialog'）；
如果（$dialog.length==0）{
//初始化对话框
$dialog=$（''）；
新基金会。
//附加到要加载的对话框关闭按钮
$（文档）。在（'单击'，'上。按钮对话框关闭'，函数（）{
//停止播放器，例如播放器。停止视频（）；
$dialog.foundation（'close'）；
返回false；
});
}
//设置对话框的内容
$（'#revealDialogContent'）.html（'×；'）；
//创建玩家并在就绪事件中播放
//player=新的YT.player（'player'。。。。。
//显示它模态
$dialog.foundation（'open'）；

var $dialog = $('#revealDialog');
if ($dialog.length === 0) {
    // init dialog
    $dialog = $('<div id="revealDialog" class="reveal dialog" data-reveal><div id="revealDialogContent"></div>');
    new Foundation.Reveal($dialog);
    // attach to to-be-loaded dialog close button(s) 
    $(document).on('click', '.button-dialog-close', function () {
        //stop player, e.g. player.stopVideo(); 
        $dialog.foundation('close');
        return false;
    });
}
// set dialog's content
$('#revealDialogContent').html('<div id="player"></div><button class="close-button" data-close aria-label="Close modal" type="button"><span aria-hidden="true">&times;</span>');

// create player and play it on the ready event
// player = new YT.Player('player'.....

// show it modal
$dialog.foundation('open');