Execute function when closing modal in Vue

Navigation
0

I'm using Bootstrap 4 in a project with Vue;

In the modal, I have a video in a youtube iframe;

What I need to do, is to pause this video, when I close the modal, either by pressing the esc key, or closing the modal x or clicking outside the modal to close it;

Does anyone have any idea what function I can do to pause this video?

Note: I'm not using jQuery.

edit: This modal is inside a vue component, so I believe jQuery will not work.

Follow the code below:

Modal: 

<!-- Modal Vídeo-->
          <div class="modal fade" id="ModalVideo" tabindex="-1" role="dialog" aria-labelledby="ModalVideoLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
              <div class="modal-content content_modal">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                <div class="corpo_video">
                  <iframe width="100%" height="450px"
                    :src="'https://www.youtube.com/embed/'+texto[0].video">
                  </iframe>
                </div>
              </div>
            </div>
          </div>

Button: 

<div class="company__box pop" data-toggle="modal" data-target="#ModalVideo">
 <span>
  Assista ao nosso
   vídeo institucional
   </span>
</div>
    
asked by anonymous 20.11.2018 / 20:47

1 answer

0

You can stop the video via JavaScript using the method .postMessage () . To do this, add the parameter ?enablejsapi=1 in the src of the video: 

:src="'https://www.youtube.com/embed/'+texto[0].video+'?enablejsapi=1'"

Create a function that will be called when the modal is closed by the hide.bs.modal event. The function will contain the method that will make the video pause: 

function paraVideo(){
   document.querySelector('.modal-body iframe')
   .contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
}
  

The value in func pauseVideo makes the video pause . If you want to do the   video stop switch by stopVideo .

You call the function by the event when the modal close: 

$('#ModalVideo').on('hide.bs.modal', paraVideo);

View on JSFIDDLE

    
20.11.2018 / 22:36
Listing in laravel Execute a function and it takes more than x seconds of the error - React Native