CODEWITHSUNDEEP
javascriptwordpressmodal-dialog
user3565700
user3565700

Reputation: 11

video not stoping when modal closed

on the following page https://yourhippo.com/course-search/ I'm trying to get the video to stop when the modal closes I'm not sure what the best option for closing the video is I've tried the following but it doesn't seem to work

  '''( 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 ));'''

Upvotes: 0

Views: 136

Answers (1)

Jelmer Overeem
Jelmer Overeem

Reputation: 419

You can use the .pause() method.

<!-- 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 ));

Source

Upvotes: 1

Related Questions