I’m working on a webpage where I have a YouTube video embedded in an iframe that’s inside a hidden container. The setup works like this - there’s a button that shows the video container when clicked, and users can watch the video normally.
The problem I’m running into is that when users close the video panel, the YouTube video keeps playing in the background even though the container is hidden again. I need the video to automatically stop when the panel gets closed.
Here’s my current implementation:
<!-- button to show video container -->
<div><a href="#" onclick="document.getElementById('videoPanel').style.display='block';">Watch Video</a></div>
<!-- video container -->
<div id="videoPanel" style="position:fixed;top:50px;left:50px;width:600px;background:#333;display:none;z-index:100;">
<iframe width="600" height="400" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
<div style="padding:10px;">
<a href="#" onclick="document.getElementById('videoPanel').style.display='none';">
Close Panel
</a>
</div>
</div>
What’s the best way to make the YouTube player pause or stop when I hide the iframe container?
Another approach that works well is to simply reload the iframe src when closing the panel. Instead of just hiding the container, you can clear the iframe source and then restore it when reopening. This forces the YouTube player to completely reset. In your close function, add document.querySelector('#videoPanel iframe').src = '' before hiding the panel, then restore the original src when showing it again. This method is simpler than implementing the full YouTube API and effectively stops all playback since the iframe content gets wiped. I’ve used this technique on several projects where I needed quick control over embedded videos without the complexity of API integration.
I’ve dealt with this exact issue before and found that using postMessage to communicate with the YouTube iframe works quite effectively. You can send a pause command directly to the YouTube player without needing to implement the full API or reload the iframe. When closing your panel, add document.querySelector('#videoPanel iframe').contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*'); before hiding the container. This sends a pause command to the YouTube player through the iframe’s message system. The main advantage is that it preserves the video position and doesn’t require reloading content, so users can resume exactly where they left off if they reopen the panel. Works consistently across different browsers in my experience.
honestly just change the src to about:blank when closing works great for me. way simpler then api stuff and doesnt require reloading the whole url each time like some suggest
To stop the YouTube video when closing your iframe container, you should leverage the YouTube IFrame Player API. Just hiding the container won’t suffice, as the video continues running in the background. I faced a similar problem in the past and learned to initialize the YouTube player using the API. You will need to load the YouTube API script, then replace the iframe with a div that has a specific ID for the player. When you trigger the ‘Close Panel’ action, simply call the player.pauseVideo() method before setting the display to none. This ensures that the video playback stops properly, giving you better control over the audio and playback state.