自動再生ファンデーション6を使用したYouTube動画

Question

私は検索して検索しましたが、この種のことについては非常に古い投稿しか見つけることができません。私が探しているのは、モーダルが閉じられたときに自動再生されるYouTubeビデオを開き、ビデオ/オーディオを停止する複数のFoundation 6 Revealモーダルを作成することです。

これは基本的な設定です。どんな助けも素晴らしいだろう！

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

Codepen

Answer 1

私はJS経由でのモーダルを明らかにして作成するためにYoutube IFrame Player APIを使用し、負荷、ビデオの起動と停止作成します。ここでは、始めるための部分的なプロトタイプがあります（プレーヤーの機能が欠けています）。

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