javascript - 单击时在 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