Bootstrap Video Modal не отображается с плагином plyr - PullRequest
Новая
       9

Bootstrap Video Modal не отображается с плагином plyr

0 голосов
/ 14 сентября 2018

У меня есть модальный бутстрап, который показывает видео html5 в порядке; однако, в тот момент, когда я заменяю html5-видеоплеер на плагин plyr, видео вообще не отображается в модале? Любые мысли по этому поводу будут оценены. Пожалуйста, проверьте код ниже:

HTML-КОД: 

<!--Modal: Name-->
        <div class="modal fade" id="product-video-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">

                <!--Content-->
                <div class="modal-content">

                    <!--Body-->
                    <div class="modal-body mb-0 p-0">

                        <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">









                           <video id="product-vid-src" class="embed-responsive-item " width="100%"   controls crossorigin playsinline  >
                              <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720">



                          </video>






                        </div>

                    </div>

                    <!--Footer-->
                    <div class="modal-footer justify-content-center">
                        <span class="mr-4">Spread the word!</span>
                        <a type="button" class="btn-floating btn-sm btn-fb"><i class="fa fa-facebook"></i></a>
                        <!--Twitter-->
                        <a type="button" class="btn-floating btn-sm btn-tw"><i class="fa fa-twitter"></i></a>
                        <!--Google +-->
                        <a type="button" class="btn-floating btn-sm btn-gplus"><i class="fa fa-google-plus"></i></a>
                        <!--Linkedin-->
                        <a type="button" class="btn-floating btn-sm btn-ins"><i class="fa fa-linkedin"></i></a>

                        <button type="button" class="closeBut btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>



                    </div>





                </div>
                <!--/.Content-->

            </div>
        </div>
        <!--Modal: Name-->

Код JavaScript и jquery: 

<script type="text/javascript">
        jQuery(document).ready(function($) {

// snippet for plyr plugin          
const player = new Plyr('video', {captions: {active: true}});
window.player = player;




 $('#product-video-modal').on('shown.bs.modal', function() {
    var product_vid = document.getElementById("product-vid-src");
    if (product_vid != null) {
      product_vid.pause();
      product_vid.currentTime = 0;
    }
  });
  })
      </script>

В тот момент, когда я удаляю плагин "сниппет для plyr", как прокомментировано выше, плагин HTML5 работает нормально и показывает на модале без каких-либо проблем?

Любой вклад будет высоко ценится 1

1 Ответ

0 голосов
/ 17 сентября 2018

Я решил эту проблему, выполнив следующее:

1 - удалите следующий класс 

embed-responsive

2- Настройте отступ на 

.embed-responsive-16by9 {

  padding-bottom:0;

}
...