关闭带有嵌入视频的 html5 模式时，音频不会停止

Question

我有一个嵌入模式的 vimeo 视频。这是简单的代码，我认为它只是显示/隐藏，所以即使视频消失了，音频也会继续播放 - 但我不确定。模态有效，关闭按钮有效，但语音仍在继续。模态的新手 - 真的可以使用一些帮助。谢谢。这是代码

CSS

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modalDialog > div {
    width: 600px;
    height:400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}

.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    audio: none;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.close:hover {
    background: #00d9ff;
}

HTML：

<a href="#openModal">
    <img src="img/video-play.png" width="125" height="125">
</a></h2>          

<div id="openModal" class="modalDialog">
<div><a href="#close" title="Close" class="close">X</a>

<iframe src="http://player.vimeo.com/video/14266818" width="600"
     height="400px" frameborder="0" webkitallowfullscreen mozallowfullscreen    
     allowfullscreen></iframe> 
</div></div>    

Answer 1

我在模态中也有一个 vimeo，当“x”退出模态时，我使用以下脚本完全关闭电影。

$('#videoToggleOff').click(function(){
    $('iframe#myVideo').attr('src',''); 
    $('iframe#myVideo').attr('src','your vimeo link here');
});

HTML

模态退出按钮

<button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="videoToggleOff"><h4 class="videoText">X</h4></button> 

模态中的 iframe

<iframe id="myVideo" src='your vimeo link' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

该脚本基本上会在单击退出时删除视频，但随后会重置 URL，因此如果用户再次单击播放，它不会损坏。