单击时在Modal中自动播放视频

时间:2016-06-03 08:51:47

标签: jquery video onclick autoplay

我目前有一个视频在按钮点击的模态窗口中打开。 当模态窗口打开时,如何使视频自动播放?

我正在使用的模态脚本被称为“重新模式”'在这里找到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>

1 个答案:

答案 0 :(得分:1)

尝试在您的视频链接后添加'?autoplay = 1',如下所示:

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