youtube-api - Foundation 6 Reveal モーダルを使用して 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>

コデペン