verstecken ein div unter youtube iframe auf klicken

Question

Ich würde 'div .blind' bei Klick auf Youtube Video (auf 'div #player') verstecken. Wie kann ich es tun?

zum Beispiel:

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

nicht sicher, was Sie genau mit "Klick auf youtube video" meine ich nehme an, Sie Ihr Element ausblenden möchten, während das Video abgespielt wird?

Die beste Implementierung wäre, den Anzeigezustand Ihres Elements zu ändern, indem Sie auf das Ereignis onStateChange zuhören.

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

Siehe auch https://developers.google.com/youtube/iframe_api_reference#onStateChange