Автовоспроизведение видео Youtube в модальном формате? (Тема Wordpress Wordpress)

Question

Привет, снова SO сообщества! У меня есть сайт Wordpress, использующий тему Avada, которая поставляется с готовым модальным элементом в своем встроенном построителе страниц Fusion Builder. Я встроил видео YouTube в модальном формате с использованием кода iframe и связал модальный с кнопкой «играть» на моей домашней странице. В настоящее время вы должны нажать кнопку «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 код не работает, потому что тема не использует загрузчик, я вставил следующий код в заголовок:

<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

Выберите Modal Модуль из Авада [Fusion Builder]. Затем вам нужно выбрать «Fusion Builder» в разделе «Модальное» и выбрать Youtube из параметров. Вам нужно выбрать опцию Автовоспроизведение Да с помощью опции Youtube.

Надеюсь, что это сработает для вас.

Answer 2

Пожалуйста, попробуйте это:

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