Question

这是我一直在努力的事情。基本上我在一个页面上方有一些图像滑块，其中大部分都有一些幻灯片上的YouTube视频。我想要实现的是在观看视频时让背景div变暗（这部分我已经实现了）下一部分是我遇到困难的地方。接下来应该发生的是，当视频停止播放或停止播放或幻灯片更改时，背景div将返回其默认设置（减去过滤器）。然后在正在播放的视频上，背景div再次变暗。基本上，当视频播放时，背景应该有过滤器，停止时应该删除过滤器。

到目前为止，这是我的代码：

HTML

<div class="cheader" style="padding-bottom: 20px; padding-top: 20px;">
<div class="Filter"></div>
<i id="cross" class="fa fa-times"></i>

<div class="whitebox" style="margin-bottom: 40px;">[wonderplugin_slider
id="12"]</div>
<div class="whitebox" style="margin-bottom: 40px;">[wonderplugin_slider
id="14"]</div>
<div class="whitebox" style="margin-bottom: 40px;">[wonderplugin_slider
id="5"]
</div>
<div class="whitebox" style="margin-bottom: 40px;">[wonderplugin_slider
id="9"]</div>
<div class="whitebox" style="margin-bottom: 40px;">[wonderplugin_slider
id="10"]</div>
<div class="whitebox" style="margin-bottom: 40px;">[wonderplugin_slider
id="6"]</div>
<div class="whitebox" style="margin-bottom: 40px;">[wonderplugin_slider
id="8"]</div>
<div class="whitebox" style="margin-bottom: 40px;">[wonderplugin_slider
id="2"]</div>
<div class="whitebox" style="margin-bottom: 40px;">[wonderplugin_slider
id="11"]</div>
<div class="whitebox" style="margin-bottom: 40px;">[wonderplugin_slider
id="32"]</div>

</div>

CSS

.whitebox { width: 1100px !important; max-width: 90%; margin: 0 auto;
 position: relative; display: block !important; background-color: #fff;
 padding: 10px; z-index: 5; }

.postid-291 .cc-postcontent, .postid-293 .cc-postcontent, .page-id-528 .cc-
postcontent { margin-bottom: -30px; line-height: 150%!important;}

#postnav {width: 1100px; max-width: 90%; margin: 0 auto; position: relative;
display: block !important; height: 50px; padding-bottom: 10px; }

.entry-meta {display: none!important; }


 .Filter { background:rgba(0,0,0,0.9)!important; opacity:0.7; -webkit-
 transition: opacity .25s ease; -moz-transition: opacity .25s ease; position:
 absolute; top:0; left:0; width: 100%; height: 100%; display: none; z-index: 
 3;}

的Javascript

//Toggle play video darken background on and off 

$(".wonderpluginslider").on("click", function(e){ //this works
   $(".Filter").show();
   $("#cross").show();     
})


$(".Filter").on("click", function(e){ //this works
   $(".Filter").hide();
  $("#cross").hide();
  location.reload(); 

})


$(".ytp-chrome-controls").on("click", function(e){ //does not appear to work
    $(".Filter").hide();
    $("#cross").hide();
})

对此事项的任何帮助都将非常感谢。正如你从我的JavaScript中看到的那样，我已经尝试重新加载窗口，这工作正常，除了客户端不希望页面重新加载，因此需要找到另一个解决方案。

如何根据视频状态更改背景图像/过滤器

0 个答案: