-4

所以我有一个弹出 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();
})
});

非常感谢您的帮助。

4

3 回答 3

2

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

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

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

于 2013-07-26T12:42:23.247 回答
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 演示

于 2013-07-26T12:46:17.437 回答
1

更改您的 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 设置为像这样固定的大尺寸意味着您将在平板电脑和移动设备上提供糟糕的体验。

于 2013-07-26T12:42:29.197 回答