"Bootstrap Modal Popup" Youtube Видео Автозапуск, возобновляет видео при выключении - PullRequest
Новая
       28

"Bootstrap Modal Popup" Youtube Видео Автозапуск, возобновляет видео при выключении

0 голосов
/ 06 ноября 2019

Я добавил видео YouTube на свой веб-сайт, которое автоматически запускается при загрузке на главной странице. Видео открывается как модальное загрузочное окно. Однако, когда всплывающее окно закрывается, видео снова начинает воспроизводиться в фоновом режиме.

Во-первых, я хочу, чтобы видео запускалось автоматически.

Во-вторых, видео автоматически останавливается при всплывающем окне.

В-третьих, не позволяйте всплывающему видео снова воспроизводиться в фоновом режиме.

Версия * Bootstrap v3.0.3

Заранее спасибоза вашу помощь. 

  <!-- POPUP SCRIPT -->  
          <script>
       $(document).ready(function(){
      $("#myModal").on("hidden.bs.modal",function(){
        $("#iframeYoutube").attr("src","#");
      })
    })   


    $(document).ready(function(){
     $("#myModal").modal("show");
      $("#myBtn").click(function(){
        $("#myModal").modal();
      });
    });


    </script>




     <!-- HEADER -->
      <header id="header" class="main__header">   </header>

     <!-- POPUP BAŞLANGIÇ -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content" style="background-color: #f9f9f900;">

        <div class="modal-body" style="padding: 0px;">

        <button type="button" class="close" style="padding:8px; background: white;" data-dismiss="modal">&times;</button>
       <iframe id="iframeYoutube" width="100%" height="450px" alt="1" src="https://www.youtube.com/embed/example?&autoplay=1;rel=0&amp;showinfo=0&amp;controls=0&amp" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

        </div>

      </div>

    </div>
  </div> 
      <!-- POPUP BİTİŞ -->

1 Ответ

0 голосов
/ 06 ноября 2019

Во-первых, вы должны активировать функцию, когда всплывающее окно закрыто. Эта функция должна останавливать воспроизведение видео в фоновом режиме. 

$("#modal-close-button").click(function () {

  $("#video-stop-button").click(); 

  });


$("#video-stop-button").click(function () {

alert("The video should stop as the modal closes because a click on the close button will trigger the stop button ");

  });

Эту функцию следует вызывать, когда всплывающее окно закрыто. для предотвращения воспроизведения видео в фоновом режиме.

...