加载页面时显示带有视频的模式，并带有单击按钮以打开相同模式的选项答案

【问题标题】：Show modal with video when loading page with option to click the button to open the same modal加载页面时显示带有视频的模式，并带有单击按钮以打开相同模式的选项
【发布时间】：2020-01-17 14:26:45
【问题描述】：

我会尽可能快...我能够通过使用 bootstrap、css、html 和 js 点击一个按钮来设置一个漂亮的视频模式。但我目前的意图是，当第一次打开页面时，这个相同的模态将与视频一起打开，如果这个人关闭这个模态，他们将可以选择单击这个按钮再次打开它......我是尝试这样做但是我没有成功。有人能给点小费吗？

HTML

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- BootsTrap library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- jQuery library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <!-- Popper JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <!-- Latest compiled JavaScript -->
</script>
  </head>
  <body>
    <main class="body-flex container-fluid d-flex flex-column flex-fill">
          <div class="row flex-column flex-fill">
        <div class="col-12 col text-center flex-fill"> <!-- change btn position here in "txt-center" -->
          <h1></h1>
          <button type="button" class="btn btn-primary video-btn custombtnsize" data-toggle="modal" data-src="https://www.youtube.com/embed/ld2Vn8ouxqY" data-target="#myModal"> Ajuda </button>  <!-- Button trigger modal , you can use btn-lg to responsive large btn -->
        </div>
      </div>
    </main>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <!-- Modal -->
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>        
            <div class="embed-responsive embed-responsive-16by9">  <!-- 16:9 aspect ratio -->
              <iframe class="embed-responsive-item" src="" id="video"  allowscriptaccess="always" allow="autoplay"></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

<script>
  $(document).ready(function() { // Gets the video src from the data-src on each button
    var $videoSrc;  
    $('.video-btn').click(function() {
      $videoSrc = $(this).data( "src" );
    });
    console.log($videoSrc); // when the modal is opened autoplay it  
    $('#myModal').on('shown.bs.modal', function (e) {
      $("#video").attr('src',$videoSrc + "?autoplay=1&amp;modestbranding=1&amp;showinfo=0" );  // set the video src to autoplay and not to show related video. Youtube related video is like a box of chocolates... you never know what you're gonna get
    })
    $('#myModal').on('hide.bs.modal', function (e) { // stop playing the youtube video when I close the modal
      $("#video").attr('src',$videoSrc);     // a poor man's stop video
    }) 
  });   // document ready  
</script>

CSS

<style> 
  body {margin: 0,2rem;}
  .body-flex {
     min-height:100vh;
     display: flex;
     flex-direction: column;
  }
  .flex-fill {
     flex: 1 1 auto;
  }
  .custombtnsize {
      width: 120px !important;
      height: 50px !important;
  }
  .modal-dialog {
        max-width: 800px;
        margin:  30px auto;
    }
  .modal-body {
    position:relative;
    padding:0px;
  }
  .close {
    position:absolute;
    right:-30px;
    top:0;
    z-index:999;
    font-size:2rem;
    font-weight: normal;
    color:#fff;
    opacity:1;
  }
</style>

【问题讨论】：

标签： javascript html css bootstrap-4 bootstrap-modal

【解决方案1】：

在文档就绪时触发模态事件：

    $(document).ready(function() { // Gets the video src from the data-src on each button
              var $videoSrc = $('.video-btn').data( "src" );
              $('#myModal').modal();

              console.log($videoSrc); // when the modal is opened autoplay it  
              $('#myModal').on('shown.bs.modal', function (e) {
                $("#video").attr('src',$videoSrc + "?autoplay=1&amp;modestbranding=1&amp;showinfo=0" );  // set the video src to autoplay and not to show related video. Youtube related video is like a box of chocolates... you never know what you're gonna get
              })
              $('#myModal').on('hide.bs.modal', function (e) { // stop playing the youtube video when I close the modal
                $("#video").attr('src',$videoSrc);     // a poor man's stop video
              }) 
            });   // document ready

【讨论】：