youtubeビデオが再生されているときにdivを非表示

Question

私はそれに重複divを持つページに埋め込まれたyoutubeビデオを持っている。 divがビデオと重なっているので、ビデオコントローラにアクセスすることはできません。

動画の再生が開始されたときに重複するdivを非表示にするにはどうすればよいですか？ここで

は私の埋め込みコードあなたはユーチューブapiを使用することができます

<div class="wrap"> 
    <iframe id="player" type="text/html" width="640" height="390" 
     src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" 
     frameborder="0"> 
    </iframe> 
    <div class="title"> 
     Hide this div when video starts playing and show it when video is paused 
    </div> 
</div> 

Demo

Answer 1

です。以下のコードをチェックしてください。複数の動画をサポートしています。 Demo

Htmlの

<div class="wrap js-player" id="1"> 
    <div class="js-video" data-id="1" data-src="CJlKYk9lbqg"></div> 
    <div class="js-title"> 
     Hide this div when video starts playing and show it when video is paused 
    </div> 
</div> 

<div class="wrap js-player" id="2"> 
    <div class="js-video" data-id="2" data-src="u1zgFlCw8Aw"></div> 
    <div class="js-title"> 
     Hide this div when video starts playing and show it when video is paused 
    </div> 
</div> 

のCss

.wrap { 
    position: relative; 
    display: inline-block; 
    height: 390px; 
    width: 640px; 
} 

.js-title{ 
    background:rgba(255, 0, 0, 0.7) ; 
    padding: 20px; 
    position: absolute; 
    bottom: 0; 
    left:0; 
    right:0; 
    color: white; 
    font-size: 20px 
} 

のJs

var YT = { 
    PlayerState: { 
     ENDED: 0, 
     PLAYING: 1, 
     PAUSED: 2, 
     BUFFERING: 3, 
     CUED: 4 
    } 
}; 

function embedScript() { 
    var tag = document.createElement('script'); 

    tag.src = 'https://www.youtube.com/iframe_api'; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
} 
embedScript(); 

function onYouTubeIframeAPIReady() { 
    var players = document.getElementsByClassName('js-player'); 

    if (players.length) { 
     for (var i = 0; i < players.length; i++) { 
      var jsPlayer = players[i]; 
      var jsVideo = jsPlayer.getElementsByClassName("js-video")[0]; 
      var videoUrl = jsVideo.dataset.src; 


      var player; 
      player = new YT.Player(jsVideo, { 
       height: '390', 
       width: '640', 
       videoId: videoUrl, 
       playerVars: {'rel': 0}, 
       events: { 
        'onStateChange': onPlayerStateChange 
       } 
      }); 
     } 
    } else { 
     console.log('No videos'); 
    } 
} 

function onPlayerStateChange(event) { 
    var videoContainer = document.getElementById(event.target.l.dataset.id); 
    var jsTitle = videoContainer.getElementsByClassName("js-title")[0]; 

    switch (event.data) { 
     case YT.PlayerState.PAUSED: 
      jsTitle.style.display = "block"; 
      break; 
     case YT.PlayerState.PLAYING: 
      jsTitle.style.display = "none"; 
      break; 
    } 
} 

Answer 2

これを試してみてください。ビデオが終了すると警告ボックスが表示されます。ビデオの状態ごとに条件を変更することができます。再生状態ではdivを非表示にし、休止状態ではスクリプトを使ってdivを表示することができます。

-1 (unstarted) 
0 (ended) 
1 (playing) 
2 (paused) 
3 (buffering) 
5 (video cued) 

http://jsfiddle.net/7Gznb/