How to pause embedded video when modal popup is dismissed using jQuery

Other Questions YouTube
1

I have a modal dialog that appears when users visit my website. Inside this modal there’s an embedded video that starts playing automatically. When users close the modal by clicking the X button, the video audio continues playing in the background even though the modal is hidden. How can I completely stop the video playback when the modal gets closed? Here’s my current setup:

CSS Styles:

.modal_backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9998;
}

.video_modal {
    position: fixed;
    width: 800px;
    background-color: white;
    border: 2px solid #333;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.modal_close_btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}

HTML Structure:

<?php
if (!isset($_COOKIE['intro_seen'])) {
    setcookie('intro_seen', 'true', time() + (365 * 24 * 60 * 60));
?>
    <div class="modal_backdrop"></div>
    <div class="video_modal">
        <span class="modal_close_btn">&times;</span>
        <iframe width="800" height="450" src="//www.youtube.com/embed/abc123xyz?autoplay=1" frameborder="0" allowfullscreen></iframe>
    </div>
<?php } ?>

jQuery Code:

$(document).ready(function() {
    $('.modal_close_btn').on('click', function() {
        $('.modal_backdrop').fadeOut();
        $('.video_modal').fadeOut();
    });
});

The fadeOut effect works fine but the video audio keeps playing. Any suggestions would be appreciated!

2

Had this exact problem two years ago on a client site. Hiding the modal doesn’t stop the iframe - it keeps loading and playing the video. What fixed it for me was clearing the iframe’s src when closing the modal. Forces it to stop completely:

$(document).ready(function() {
$(‘.modal_close_btn’).on(‘click’, function() {
$(‘iframe’).attr(‘src’, ‘’);
$(‘.modal_backdrop’).fadeOut();
$(‘.video_modal’).fadeOut();
});
});

This kills the video source before hiding the modal, so no audio can keep playing. Way more reliable than messing with YouTube’s postMessage API and works across all browsers.