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

Posted 2021-03-27

您好再次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+"&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本身是否使用bootstrap - 我不确定主题是什么构建的。所以，为了防止我的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从我能够阅读的内容看起来是正确的，似乎所有内容都设置正确。但是没有什么可行的。那里的任何代码天才都会看到这个问题？

答案

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

希望这对你有用。

另一答案

请试试这个：

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

另一答案

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