Youtube 视频有 Bootstrap 模态问题

Question

我有一个小问题，我的 YouTube 视频无法播放，只是显示黑屏，我认为有一些小问题，但我真的找不到它。

这里还有页面

的现场演示 url

 <section class="video section text-left  position-relative" id="f">
       <div class="vid-img section-img wow fadeInRight position-absolute">
         <div class="Video-content">
             <img src="assets/images/Video-back.png" alt="">

             <a class="mfp-iframe video-play-btn video-play-cus" data-toggle="modal" data-src="https://www.youtube.com/embed/nj3CaqBT7lY" data-target="#myModal"><img src="assets/images/play.png" alt=""></a>
         </div>
       </div>
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-5 section-content wow fadeInLeft">
                   <div class="video-text">
                       <h1>The professional <br> development <br/> social network for <br/> 2019</h1>

            <a class="mfp-iframe video-play-btn" data-toggle="modal" data-src="https://www.youtube.com/embed/nj3CaqBT7lY" data-target="#myModal">See what we’re building</a>
                   </div>
                </div>
            </div>

        </div>
    </section>
    <!--video-->




      <!-- Video Popup-->
   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content"> 
             <button type="button" class="close" data-dismiss="modal">Close Video <img src="assets/images/close-btn.svg" alt=""></button>                
              <div class="modal-body">
                <!-- 16:9 aspect ratio -->
                    <div class="embed-responsive embed-responsive-16by9">
                      <iframe class="embed-responsive-item" src="" id="video"  allowscriptaccess="always">></iframe>
                    </div>
              </div>
            </div>
          </div>
        </div>

这里是 javascript / jquery 源代码。我想就是这样了，但它仍然显示黑屏。

<script type="text/javascript">

    $('.video-play-btn').click(function()
{
$videoSrc = $(".video-play-btn").data( "src" );
});

</script>

<script type="text/javascript">

    // when the modal is opened autoplay it  
    $('#myModal').on('shown.bs.modal', function (e)
    {
        // set the video src to autoplay and not to show related video. 
        console.log($("#video").attr('src',$videoSrc));

        //$("#video").attr('src',$videoSrc + "?rel=0&amp;showinfo=0&amp;modestbranding=1&amp;autoplay=1&amp;controls=0&amp'enablejsapi=1" ); 
    });//#myModal show

    // stop playing the youtube video when I close the modal
    $('#myModal').on('hide.bs.modal', function (e)
    {
        // a poor man's stop video
        $("#video").attr('src',$videoSrc); 
        //remove modal from DOM
        //$("#myModal").detach();
    });//#myModal close

</script>

Answer 1

您的来源在正式版中未定义。您没有将 YouTube 视频的来源添加到您的 iframe。

显示live版本src存在iframe错误：

src="undefined?rel=0&amp;amp;showinfo=0&amp;amp;modestbranding=1&amp;amp;autoplay=0"

应该是这个例子：

<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>

检查您的 iframe 代码：

<iframe class="embed-responsive-item" src="" id="video"  allowscriptaccess="always">></iframe>

Youtube 视频有 Bootstrap 模态问题

Youtube Video with Bootstrap Modal issue

youtube

modal-dialog

twitter-bootstrap