Avada 模态 Vimeo 视频关闭后继续播放

Question

在主页上，您会看到一个视频播放按钮。单击它以打开包含视频的模式 window。视频未设置为自动播放。当您关闭模式 window 时，视频中的音频会继续播放。

我花了好几个小时研究这个，我试过在页眉和页脚添加大量 "bootstrap" 模态视频 javascript 代码，但到目前为止没有任何效果。

我对 javascript/jquery 了解不多，但我对 HTML 和 CSS 了解很多。我搜索了站点源，但我似乎无法找到此模态背后的技术，即它是否使用 bootstrap 或其他东西——换句话说，我找不到控制模态的脚本。

这是一篇我已经阅读过但没有成功的文章：
Play and stop Vimeo video placed in Bootstrap modal
与此相同：
Audio from vimeo video continues after modal has closed
还有很多其他的对我没有帮助。

这是创建模态的HTML：

<div class="fusion-modal modal fade modal-1 homepage-video in" tabindex="-1" role="dialog" aria-labelledby="modal-heading-1" aria-hidden="false" id="homepage-video" style="display: block;">
 <div class="modal-dialog modal-lg">
  <div class="modal-content fusion-modal-content" style="background-color:#f6f6f6">
   <div class="modal-header">
    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">×</button>
     <h3 class="modal-title" id="modal-heading-1" data-dismiss="modal" aria-hidden="true" data-fontsize="28" data-lineheight="36"></h3>
   </div>
    <div class="modal-body">
     <iframe src="https://player.vimeo.com/video/151703999?title=0&amp;byline=0&amp;portrait=0&amp;api=1&amp;player_id=player_1&amp;wmode=opaque" width="710" height="399" frameborder="0" allowfullscreen="allowfullscreen" id="player_1"></iframe>
    </div>
   </div>
  </div>
</div>

同样，如果我能找到模态的 JS，我也会提供它。

这是我最近尝试的 jquery（在模式关闭时停止播放视频），但没有用（添加到页眉和页脚）：

  videoSRC = $('iframe#player_1').attr('src');
   $('button.close').click(function () {
   $(' iframe#player_1').attr('src', videoSRC);
   });

   $('.homepage-video').on('hidden.bs.modal', function (e) {
   $(' iframe#player_1').attr('src', videoSRC);
   });

任何帮助深表感谢。谢谢！

Answer 1

您可以使用 Vimeo JS 轻松做到这一点 API。从此 link 下载并上传 player.js 到您的 wordpress 主题文件夹：https://github.com/vimeo/player.js/blob/master/dist/player.min.js

上传后，您可以使用 jquery 像这样触发事件：-

jQuery(document).ready(function($) {

    var jqueryPlayer = new Vimeo.Player($('iframe#player_1'));

    $('.homepage-video').on('hidden.bs.modal', function (e) {
        jqueryPlayer.pause();
    });

});

它将解决您的问题。(y)

Avada 模态 Vimeo 视频关闭后继续播放

Avada modal Vimeo video continues playing after being closed

wordpress

video

jquery

vimeo

bootstrap-modal