javascript - 模态关闭时视频不停止

Question

在下一页https://yourhippo.com/course-search/我试图让视频在模式关闭时停止我不确定关闭视频的最佳选择是什么我尝试了以下但它似乎不起作用

  '''( function( w, d ) {
      'use strict';
       // Get the modal
      var el = d.getElementsByClassName( 'container' )[0];
       var modal = d.getElementById( 'id01' );
      // When the user clicks anywhere outside of the modal, close it
       w.onclick = function ( event ) {
        if ( event.target == modal ) {
           modal.style.display = 'none';
        }
      };
   d.getElementsByClassName( 'close' )[0].addEventListener( 'click',
      function() {
         d.getElementById( 'id01' ).style.display = 'none';
         while ( el.firstChild ) {
                 el.removeChild( el.firstChild ); 
      }
     }, false );

    }( window, document ));'''

标签： javascriptwordpressmodal-dialog

Answer 1

您可以使用 .pause() 方法。

<!-- Add the vimeo api. -->
<script src="https://player.vimeo.com/api/player.js"></script>

var iframe = document.querySelector('iframe'); // the iframe that is already in your HTML
var player = new Vimeo.Player(iframe); // init the vimeo video player
 
player.pause() // pauses the video

( function( w, d ) {
      'use strict';
       // Get the modal
      var el = d.getElementsByClassName( 'container' )[0];
       var modal = d.getElementById( 'id01' );
      // When the user clicks anywhere outside of the modal, close it
       w.onclick = function ( event ) {
        if ( event.target == modal ) {
           modal.style.display = 'none';
           var iframe = document.querySelector('iframe'); // the iframe that is already in your HTML
           var player = new Vimeo.Player(iframe); // init the vimeo video player
           player.pause() // pauses the video
        }
      };
   d.getElementsByClassName( 'close' )[0].addEventListener( 'click',
      function() {
         d.getElementById( 'id01' ).style.display = 'none';
         while ( el.firstChild ) {
                 el.removeChild( el.firstChild ); 
      }
     }, false );

    }( window, document ));

资源