埋め込まれたYTが再生されたときにCSSアニメーションを停止する

Question

私はこれを修正するいくつかの良い方法を見つけようとしていますが、無駄です。 前回の作業のいくつかを示すためにカルーセルを使用している私が作業しているプロフィールのWebサイトがあります。

カルーセルのアイテムの1つはYT iFrameです。カルーセルと

カルーセルの項目の上にあなたのマウストリガされますアニメーションをナビゲートする

• 次及び前ボタン;：カルーセルは、2つの主要な機能を有しますカードを裏返すのと同じように、反転してプロジェクトの詳細を表示します。

カルーセル内の項目は、主にイメージですが、私はまた、YT iFrameを追加しました。私が直面している問題はかなり明らかです。 iFrameを含むアイテムの上にマウスを置くと、フリップアニメーションが開始されます。

だから、私は何をする必要があるか、私はそれを行うことができる方法上の任意のアドバイスをビデオが再生されている時にチェックして（好ましくは、その項目の場合のみ）アニメーションを無効に...

のですか？

これは私のローカルマシンから直接取得したコードパッドです（したがって、スクリプト参照）。

https://codepen.io/Todai/pen/GqGJxR

いくつかのサンプルコード：

  <div class="item c"> 
       <div id="f1_container"> 
        <div id="f1_card" class="shadow"> 
        <div class="front face"> 
         <iframe width="250" height="200" src="https://www.youtube.com/embed/92i9TvuVtQc" frameborder="0" allowfullscreen></iframe> 
          </div> 
          <div class="back face center"> 
          <p>A distributed software built in Erlang, using a MSSQL instance and 
           a C# Web Api end-point.</p> 
          <p>I was in charge with working on the Android and web front-end.</p> 
         <a href="https://github.com/mustsweden/GekkoAndroid/tree/master/geostocks"> <span> <i class="fa fa-github fa-2x"> </i> </span></a> 
        </div> 
       </div> 
      </div> 
      </div> 

Answer 1

IFrameプレーヤーAPIを使用する必要があります。 JavaScriptを使用してYouTubeビデオプレーヤーをページに埋め込み、プレーヤーをコントロールすることができます。 APIは、プレーヤーの状態が変更されたときにonPlayerStateChange関数を呼び出します。そして、あなたはビデオがいつ再生されているかを知り、アニメーションを削除します。以下のコードを見ることができます：ビデオの再生が終了するまで、アニメーションが再び追加されます。

var done = false; 
    function onPlayerStateChange(event) { 
    if (event.data == YT.PlayerState.PLAYING && !done) { 
     stopAnimation(); 
     done = true; 
    }else{ 
     startAnimation(); 
     done=false; 
    } 
    } 
    function stopAnimation() {  $("#player").parent().parent().addClass('notransition'); 
    } function startAnimation(){ $("#player").parent().parent().removeClass('notransition'); 

}

Answer 2

あなたはこのためにYouTubeのAPIが必要になりますし、動画が再生されているかどうかを検出するためにJSを使用して、唯一のIDでタイルの反転を防ぎます。