模式关闭时停止在 iframe 中播放视频

Question

我有一个带有文本“观看视频”的播放图像，单击时会打开一个引导模式窗口来播放我输入的视频。我有 moday 视图可以工作。我遇到的问题是当我播放视频并在播放时退出屏幕时，视频继续在后台播放。如果我再次单击“观看视频”链接，它将从之前停止的地方播放视频。

当模态窗口关闭时，我需要让视频停止。下次我单击“观看视频”链接时，它需要从头开始播放视频。我对此还是陌生的，我不确定该怎么做。任何人都知道我怎么能做到这一点？

 <div class="col-md-12 f-play" data-toggle="modal" data-target="#myModal">
    <img class="f-play-image" src="images/play.svg" data-target="#myModal" data-video-fullscreen="">Watch video
</div>

<div id="myModal" class="modal fade" role="dialog" tabindex='-1'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/7pvci1hwAx8?" allowfullscreen="" width="640" height="360" frameborder="0"></iframe>
                 </div>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
             </div>

        </div>
    </div>
</div>

原文由 Michelle Ashwini 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我设法让它与@Leo 提供的链接一起使用。但是它很慢，因为每次单击链接时它都会重新加载框架。尝试了来自 Twitter Bootstrap Modal 停止 Youtube 视频 的@guillesalazar 解决方案，它运行良好。这是我使用的解决方案。

 $("#myModal").on('hidden.bs.modal', function (e) {
    $("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
});

原文由 Michelle Ashwini 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

那么你可以简单地删除 iframe 的 src 并再次放回去;

  <iframe id="videosContainers" class="yvideo" src="https://www.youtube.com/embed/kjsdaf  ?>" w></iframe>
 <span onclick="stopVideo(this.getAttribute('vdoId'))" vdoId ="yvideo" id="CloseModalButton"  data-dismiss="modal"></span>

现在是 Jquery 部分

function stopVideo(id){
  var src = $j('iframe.'+id).attr('src');
  $j('iframe.'+id).attr('src','');
  $j('iframe.'+id).attr('src',src);

}

原文由 Kazi Hasan Ali 发布，翻译遵循 CC BY-SA 3.0 许可协议