2016-06-03 2 views
0

В настоящее время у меня есть видеоролик, который открывается в модальном окне при нажатии кнопки. Как сделать автовоспроизведение видео при открытии модального окна?Автоматическое воспроизведение видео в Modal по щелчку

Модальное скрипт я использую называется 'Remodal' здесь http://vodkabears.github.io/remodal/

===================

FIDDLE

https://jsfiddle.net/tsdev/o4ndexuw/1/

===================

HTML

<!-- 
    Button 
    ================================================================================== --> 

    <button class="image-button" onclick="window.location.href='#modal'"> 
     <span class="label">Watch Careers Video</span> 
     <span class="icon flaticon-arrow"></span> 
    </button> 


    <!-- 
    Video Modal 
    ================================================================================== --> 


    <div class="remodal" data-remodal-id="modal" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc"> 
     <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button> 

     <div class="video-container clearfix"> 

      <div class="video clearfix"> 
       <embed width="200" height="113" src="https://www.youtube.com/embed/xxxxxx" frameborder="0" allowfullscreen></embed>         
      </div> 

     </div> 

    </div> 

Jquery

<script src="<?php bloginfo('template_directory'); ?>/templates/careers/plugins/remodal/remodal.js"></script> 

    <script> 

     var stopVideo = function (element) { 
      var iframe = element.querySelector('embed'); 
      var video = element.querySelector('video'); 
      if (iframe !== null) { 
       var iframeSrc = iframe.src; 
       iframe.src = iframeSrc; 
      } 
      if (video !== null) { 
       video.play(); 
      } 
     }; 


     $('.remodal-close, .remodal-overlay').click(function(){ 
     var id = this.id || this.getAttribute('data-id'); 
     var modal = document.querySelector(id); 
     //closePopup(); 
     stopVideo(modal); 
     }); 


     // The second way to initialize: 
     /*$('[data-remodal-id=modal2]').remodal({ 
     modifier: 'with-red-theme' 
     });*/ 

    </script> 
+0

bdway видео взгляните на html5 видео тег, очень удобный. Вы можете легко автовоспроизвести видео с меньшим кодом. – Sherlock

+0

Спасибо, посмотрим, может ли это прекратить видео, когда вы закрываете модальный? – Amesey

ответ

1

Попытка добавить 'автозапуск = 1?' Позади видеосвязь, как это:

https://www.youtube.com/embed/zrncfNIgc1s?autoplay=1

+0

Блестящий, что сработал, не может поверить, что все было так просто! Мне просто нужно выяснить, как остановить его, когда вы закрываете модальный. – Amesey

Смежные вопросы