以模态自动播放Youtube视频? (Avada Wordpress主题)

时间:2017-01-19 02:13:30

标签: jquery wordpress twitter-bootstrap youtube bootstrap-modal

你好再次SO社区!我有一个使用Avada主题的Wordpress网站,该主题在其原生的" Fusion Builder"中有一个开箱即用的模态元素。页面构建器。我使用iframe代码在模式中嵌入了一个YouTube视频,并将模式链接到" play"我主页上的按钮。目前,您必须按"播放"按钮打开以启动弹出窗口(模态),然后再次按播放以开始播放视频。我希望视频在模态窗口打开后立即开始播放,这样用户就不必按两次播放。我发现这比我想象的要困难。

这是我的网站:http://8d2.b73.myftpupload.com/

我不知道如何编写jquery,只有HTML和CSS。但是,我对阅读jquery有点熟悉。我目前正在使用此代码(如下所示),这是我从另一个SO搜索中获得的。它不起作用。我使用插件将代码插入标题。

var videoSrc = $("#homepage-video iframe").attr("src");

$('#homepage-video').on('show.bs.modal', function () { // on opening the modal
// set the video to autostart
$("#homepage-video iframe").attr("src", videoSrc+"&autoplay=1");
});

$("#homepage-video").on('hidden.bs.modal', function (e) { // on closing the modal
// stop the video
$("#homepage-video iframe").attr("src", null);
});

这是我的模态HTML代码,虽然我使用页面构建器来创建和管理模态,技术上使用短代码,所以我真的看不到或对此代码做任何事情:

<div class="fusion-modal modal fade modal-1 homepage-video" tabindex="-1" role="dialog" aria-labelledby="modal-heading-1" aria-hidden="true" id="homepage-video" style="display: none;">
  <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="25" data-lineheight="31"></h3>
      </div>
      <div class="modal-body">
        <p><iframe src="https://www.youtube-nocookie.com/embed/BLFCOVea3yU?rel=0&amp;showinfo=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
      </div>
    </div>
  </div>
</div>

我不确定Avada是否原生使用引导程序 - 我不确定主题是什么构建的。所以,为了防止我的jquery代码因为主题没有使用bootstrap而无效,我将以下内容插入到标题中:

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>

我的jquery从我能够阅读的内容看起来是正确的,似乎所有内容都已正确设置。但是没有什么可行的。那里的任何代码天才都会看到这个问题吗?

3 个答案:

答案 0 :(得分:2)

从Avada [Fusion Builder]中选择模态模块。然后,您需要在Modal的内容中选择“Fusion Builder”,然后从选项中选择Youtube。您需要从Youtube选项中选择“自动播放是”选项。

希望这对你有用。

答案 1 :(得分:0)

请尝试这个:

$("iframe#divID").attr("src", $("iframe#divID").attr("src").replace("autoplay=0", "autoplay=1"));

答案 2 :(得分:0)

提出另一个答案,我实际上不得不去模态构建器中的Fusion Builder元素生成器(例如,能够放入代码): enter image description here