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

【问题标题】：Autoplay Youtube video in modal? (Avada Wordpress theme)以模态自动播放 Youtube 视频？（Avada Wordpress 主题）
【发布时间】：2017-01-19 02:13:30
【问题描述】：

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

这是我的网站：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+"&amp;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 代码由于主题未使用引导程序而无法正常工作，我将以下内容插入到标题中：

<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 看起来是正确的，而且似乎一切都已正确设置。但是，没有任何工作。有没有代码天才看到这个问题？

【问题讨论】：

更新：事实证明这根本不需要代码，这太棒了！请参阅下面的答案，并务必阅读 cmets 了解详细信息。

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

【解决方案1】：

从 Avada [ Fusion Builder ] 中选择模态模块。然后你需要在Modal的Contents中选择“Fusion Builder”，然后从options中选择Youtube。您需要选择选项 Autoplay Yes from Youtube 选项。

希望这对你有用。

【讨论】：

模态元素（Fusion Builder）只有一个用于“模态内容”的文本框，因此除非您使用 HTML 或简码，否则不允许您嵌入其他元素。我之前在内容框中使用了 iframe 嵌入代码，但在阅读了这个答案后，我尝试使用 YouTube 元素中的短代码，它工作了！！！
为了让其他可能遇到同样问题的人清楚，您必须首先创建一个模态元素，然后创建一个 YouTube 视频元素。输入视频的详细信息，并确保已打开自动播放。然后将页面切换到“默认视图”，以便将所有内容转换为简码。找到您的 YouTube 视频元素的简码并复制它。切换回 Fusion Builder，然后将短代码粘贴到 Modal 元素内的“modal content”框中。您可以删除您创建的 YouTube 视频元素（仅用于获取简码）。根据需要使用 CSS 设置样式。

【解决方案2】：

请试试这个：

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

【讨论】：

【解决方案3】：

扯掉另一个答案，我实际上不得不去模态构建器中的融合构建器元素生成器（例如，能够输入代码）：

【讨论】：