скрыть div под youtube iframe при щелчке

Question

Я бы спрятал 'div .blind' при нажатии на youtube video (на 'div #player'). Как мне это сделать?

, например:

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

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

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