前端之家

  1. 首页
  2. 问答

Youtube视频自动播放“ Bootstrap Modal Pop up”，重新打开视频

• 问答

我已将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İŞ -->
ilovemyf 回答：Youtube视频自动播放“ Bootstrap Modal Pop up”，重新打开视频

首先，应在弹出窗口关闭时触发一个功能。此功能应停止在后台播放视频。

$("#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 ");

  });

每当关闭弹出窗口时，都应调用此函数，以防止在后台播放视频。

bootstrap-modal
本文链接：https://www.f2er.com/3151991.html

大家都在问