How to stop Playing video in the background when popup modal is closed or click on out side of the popup

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.