0

I have a button. When user click on button i am showing the video in popup modal. But when i click on outside of the popup the popup is closing but video is keep playing and when i close the popup modal without pausing the video it keeps playing in the background.

How to stop the video playing in the background and reset to starting of the video when popup closed.

I have added this code in the page builder for playing video in the popup

<button type="button" class="action" data-trigger="trigger">
    <svg xmlns="https://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3 18v-12l10 6-10 6z" style="fill:#fff" /></svg>
</button>
<div data-bind="mageInit: {
        'Magento_Ui/js/modal/modal':{
            'type': 'popup',
            'trigger': '[data-trigger=trigger]',
            'responsive': true,
            modalClass: 'nursery-modal',
            'buttons': [{
                class: 'action'
            }]
        }}">
    <div class="content">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/PRajg7kFcZQ?autoplay=0" title="YouTube video player" frameborder="0" allow=accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</div>

Any help can be appreciated.

Thanks.

1 Answer 1

0

Consider trying this ?

$('.nursery-modal').on('modalclosed', function() { 
      console.log("Modal is closed then stop the video");
      $('#video').trigger('pause'); 
});

Considering video would be the id of the iframe.

And you should trigger this when the modal is closing

4
  • HI @Claims where exactly i need to add this line
    – Mani
    May 30 at 10:01
  • you somehow need to catch in js the moment where you close the modal. A dumb idea would to a variable set to false whenever you click outside of the modal; and when this happens you use that code.
    – Claims
    May 30 at 10:04
  • Claims could you show me an example
    – Mani
    May 30 at 10:13
  • @Mani See updates
    – Claims
    May 30 at 13:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.