iframe youtube視頻開始播放後昏暗的背景

Question

Hello :)我想在YouTube視頻開始播放後儘快調暗我的（WordPress）網站的背景。

視頻嵌入這樣的：

<iframe frameborder="0" width="660" height="371" allowfullscreen="" src="https://www.youtube.com/embed/CMm6tDavSXg?feature=oembed"> 

要暗淡的背景我會用這樣的：

<div class="div_popup_overlay"></div> 

.div_popup_overlay { 
display: none; 
position: fixed; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
background-color: #333; 
opacity: .7; 
z-index: 3000; 
} 

，然後使用jQuery

觸發它

$("#YOUTUBEVIDEO").click(function() { 
$(".div_popup_overlay").fadeIn(); 
}); 

//更像onvideoplay $（「。div_popup_overlay」）。fadeIn（）;

所以現在我只是無法弄清楚如何使用YouTube API以正確的方式，而不使用API​​

Answer 1

試試這個嵌入視頻：

首先，給你的iframe的ID ，以便API可以找到它。接下來，請確保在src屬性中追加參數enablejsapi並將其設置爲1（以便API可以掛鉤到現有DOM對象的事件中）。然後，建立一個綁定到playerState事件，讓播放視頻時的時候，它會觸發淡入像這樣的東西（假設你已經給你的iframe的「myplayer」的ID）：

<script> 
    var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

    var player; 
    function onYouTubeIframeAPIReady() { 
    player = new YT.Player('myplayer', { 
     events: { 
     'onStateChange': onPlayerStateChange 
     } 
    }); 
    } 

    function onPlayerStateChange(event) { 
    if (event.data == YT.PlayerState.PLAYING) { 
     $(".div_popup_overlay").fadeIn(); 
    } 
    else if (event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED) { 
     $(".div_popup_overlay").fadeOut(); 
    } 
    } 
</script>