iframe youtube视频开始播放后背景变暗

Question

你好：）我想在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事件的绑定，以便在播放视频时触发淡入

<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>