播放 youtube 视频时隐藏 div

Question

我在页面上嵌入了一个 youtube 视频，该视频上有一个重叠的 div。由于 div 与视频重叠，因此无法访问视频控制器。

如何在视频开始播放时隐藏重叠的 div，并在视频停止播放时再次显示。

这是我的嵌入式代码

<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

您可以使用 YouTube api。检查下面的代码。多个视频支持。

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/