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 in background and also 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 or when we click on outside of the popup.

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>