在youtube下隐藏一个div如果点击

Question

我会隐藏'div .blind‘点击youtube视频(在'div #player')。我该怎么做呢？

例如：

​

JS:
...
var player;
function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
		videoId: 'Lo3rrP8u7Mw',
		playerVars: {
			'wmode': 'transparent',
			'color': 'white',
			'modestbranding': 1,
			'showinfo': 1

		},
		events: {
			'onReady': onPlayerReady,
			'onStateChange': onPlayerStateChange
		}
	});
...

CSS:
.video .blind {
  display: block;
  width: 300px;
  height: 300px;
  background-color: black;
  }

HTML:
<div class="video">
  <div id="player" ></div>
  <div class="blind" id="blind"></div>
</div>

<div class="video">
  <div id="player2" ></div>
  <div class="blind" id="blind"></div>
</div>

​

Answer 1

不知道你说的“点击youtube视频”到底是什么意思，我猜你想在视频播放的时候隐藏你的元素？

最好的实现是通过侦听onStateChange事件来更改元素的显示状态。

可以在onPlayerStateChange函数中实现以下代码：

function onPlayerStateChange(event) {
    let strDisplay = event.data === YT.PlayerState.PLAYING ? 'none' : 'block';
    document.querySelector('.blind').style.display = strDisplay;
}

另见reference#onStateChange