以模态自动播放Youtube视频？ （Avada Wordpress主题）

Question

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

这是我的网站：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从我能够阅读的内容看起来是正确的，似乎所有内容都已正确设置。但是没有什么可行的。那里的任何代码天才都会看到这个问题吗？

Answer 1

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

希望这对你有用。

Answer 2

请尝试这个：

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

Answer 3

提出另一个答案，我实际上不得不去模态构建器中的Fusion Builder元素生成器（例如，能够放入代码）：