Question

所以我有一个pop over div，显示当你在那里播放YouTube视频自动播放时，问题是，如果盒子关闭，视频的音频仍然存在，有没有办法绕行这与jQuery？我不知道是否有办法阻止来自某个元素的声音？

代码如下。

CSS

.full_page_overlay1 {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background: #626262;
    opacity: 0.9;
    z-index: 2147483646;
}

.cart_over1 {
    width: 1024px;
    position: fixed;
    float: left;
    border: 1px solid black;
    box-shadow: 1px 1px 10px black;
    background: white;
    z-index: 2147483647;
    border-radius: 10px;
}

#close_box1 {
    float: left;
    top: 0px;
    left: 0px;
    display: table-cell;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    font-size: 40px;
    text-align: center;
    color: black;
    text-shadow: 1px 1px 3px black;
    font-weight: bolder;
    cursor: pointer;
    margin-bottom: 10px;
}

HTML / PHP

<?php

  if ($_COOKIE['video'] != 'watched') {

$value = "watched";

// send a simple cookie
setcookie("video",$value,time() + (10 * 365 * 24 * 60 * 60));

?>

   <div class="full_page_overlay1"></div>

  <div class="container">

  <div class="cart_over1">

      <div id="close_box1">X</div>

      <iframe width="1024" height="600" src="//www.youtube.com/embed/zDnVDyVYiv8?autoplay=1" frameborder="0" allowfullscreen></iframe>

  </div>
      </div>
      <?php } ?>

和jQuery

$( document ).ready(function() {
    $("#close_box1").click(function(){
    $(".full_page_overlay1").fadeOut();
    $(".cart_over1").fadeOut();
})
});

非常感谢您的帮助。

Answer 1

当您使用iFrame时，您可以清除其src：

$( document ).ready(function() {
    $("#close_box1").on("click", function () {
        $(".full_page_overlay1").fadeOut();
        $(".cart_over1").fadeOut().find("iframe").attr("src", "");
    })
});

如果您使用的是jQuery UI Dialog，则可以将其设置为在关闭事件中完成。

Answer 2

替换：

<iframe width="1024" height="600" src="//www.youtube.com/embed/zDnVDyVYiv8?autoplay=1" frameborder="0" allowfullscreen></iframe>

致：

<iframe width="1024" height="600" src="//www.youtube.com/embed/zDnVDyVYiv8?autoplay=1" frameborder="0" allowfullscreen id="clearmySound"></iframe>

替换Js代码：

$( document ).ready(function() {
    $("#close_box1").click(function(){
    $(".full_page_overlay1").fadeOut();
    $(".cart_over1").fadeOut();
    $("#clearmySound").attr('src','');      
})
});

JSFIDDLE DEMO

Answer 3

更改您的iframe，使其具有ID：

  <div id="close_box1">X</div>

  <iframe width="1024" height="600" ID="autoplayvideoframe" src="//www.youtube.com/embed/zDnVDyVYiv8?autoplay=1" frameborder="0" allowfullscreen></iframe>

然后在窗口关闭时删除该元素：

$( document ).ready(function() {
    $("#close_box1").click(function(){
    $(".full_page_overlay1").fadeOut();
    $(".cart_over1").fadeOut();
    $("#autoplayvideoframe").remove();
})
});

或者你可以使用一个预先存在的模态弹出窗口来处理这种事情。将iframe设置为一个固定的巨大尺寸就像这意味着你会给平板电脑和移动设备带来糟糕的体验。

使用jQuery关闭div时停止YouTube视频

3 个答案: