Question

我看过几个类似的问题，但遗憾的是，没有一个答案能够完全解决我的问题。我有多个模态，每个模式都有不同的视频iFrame。我希望视频在模态关闭时停止播放。到目前为止，我尝试使用jQuery在用户关闭模式时停止视频。它有效，但由于某些原因，所有视频都被我的代码中列出的第一个视频所取代。有点奇怪。你可以在这里看到它：http://tiffanymackins.com/gentrification/我没有使用Bootstrap或任何框架。非常感谢任何帮助。

以下是我正在使用的代码片段：

<a href="#modal-soulshine"><img id="soulshine-pin" class="pins" src="images/redPin.png"></a> 
    <div id="modal-soulshine" class="modal">
       <div>
            <a href="#close" title="Close" class="close"> close </a>
            <h2> Soulshine Organics Farm: Jesse Leadbetter and Nicole Argento</h2>
            <span class="ss-info"> Moved to Belmont in 2009</span>
           <iframe id="player" width="450" height="253" src="https://www.youtube.com/embed/EpDEd9R005k" frameborder="0" allowfullscreen></iframe>

           <p>....</p>
       </div>     
    </div>

这是阻止视频播放的jQuery。：

/*Function built to take on search for youtube video in modal*/
function ytplayer() {
    $('.modal iframe').attr("src", $(".modal iframe").attr(
        "src"));
}  
/*Function shuts down video when dismiss button is toggled*/
$('.close').click(function() {
    $('#player').stop(this);
    ytplayer();
});

Answer 1

试试吧

$( '#modal-soulshine').on( 'hidden.bs.modal', function (e) {

    $( '#modal-soulshineiframe' ).removeAttr( 'src' );

});

当Modal关闭时，停止播放Youtube

1 个答案: