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

问题描述 投票:0回答:3

您好再次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从我能够阅读的内容看起来是正确的,似乎所有内容都设置正确。但是没有什么可行的。那里的任何代码天才都会看到这个问题?

jquery wordpress twitter-bootstrap youtube bootstrap-modal
3个回答
2
投票

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

希望这对你有用。


0
投票

请试试这个:

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

0
投票

重复另一个答案,我实际上不得不去模态构建器内的融合构建器元素生成器(例如,能够输入代码):enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.