twitter-bootstrap - 具有Bootstrap Modal问题的YouTube视频

Question

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

这也是页面的实时演示网址

http://chet.world/new-design/

 <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。

它显示实时版本src上存在iframe错误:

src="undefined?rel=0&showinfo=0&modestbranding=1&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>