Youtube видео с проблемой начальной загрузки - PullRequest
Новая
       42

Youtube видео с проблемой начальной загрузки

0 голосов
/ 10 июня 2019

У меня небольшая проблема с тем, что мое видео на 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>

1 Ответ

1 голос
/ 10 июня 2019

Ваш источник не определен в живой версии.Вы не добавили источник своего видео YouTube в свой iframe.

Это показывает, что в живой версии есть ошибка iframe src: 

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