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 $（＆＃34; .div_popup_overlay＆＃34;）。fadeIn（）;

所以现在我无法弄清楚如何以正确的方式使用youtube api，而无需使用api嵌入视频

Answer 1

试试这个：

首先，为您的iframe提供一个ID，以便API可以找到它。接下来，确保在src属性中附加参数enablejsapi并将其设置为1（这样API就可以挂钩到现有DOM对象的事件中）。然后，设置一个绑定到playerState事件，这样当视频播放时，它会触发淡入。这样的事情（假设你给你的iframe ID为＆＃34; myplayer＆＃34;）：

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

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

1 个答案: