Avada modal Vimeo 视频关闭后继续播放答案

【问题标题】：Avada modal Vimeo video continues playing after being closedAvada modal Vimeo 视频关闭后继续播放
【发布时间】：2016-11-17 21:01:46
【问题描述】：

这里是网站：http://neillieleadershipgroup.com/

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

我花了几个小时研究这个，我尝试在页眉和页脚中添加大量“引导”模态视频 JavaScript 代码，但到目前为止没有任何效果。

我对 javascript/jquery 了解不多，但我对 HTML 和 CSS 了解不少。我搜索了站点源代码，但似乎找不到此模式背后的技术，即它是使用引导程序还是其他东西——换句话说，我找不到控制该模式的脚本。

这是一篇我已经阅读但尝试无济于事的文章：
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);
   });

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

【问题讨论】：

标签： jquery wordpress video bootstrap-modal vimeo

【解决方案1】：

您可以使用 Vimeo JS API 轻松做到这一点。从此链接下载 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)

【讨论】：

我将它添加到我的头文件中：