点击隐藏youtube iframe下的div

Question

我会在点击youtube视频时隐藏'div .blind'（在'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;
}

另见https://developers.google.com/youtube/iframe_api_reference#onStateChange