Back to all resources
video control

Pause/Reset Video Embed on Click

By Corey Moen
This JavaScript snippet utilizes jQuery to handle the click event on any HTML element with the class .close-video. When an element with this class is clicked, the script iterates through every <iframe> element on the page. For each <iframe>, it retrieves the current src attribute, and then immediately sets it back to the same value. 

This action of resetting the src attribute is often used as a simple method to reload the iframe, which can effectively stop any videos that are currently playing within the iframe. This is particularly useful for stopping embedded video content from platforms like YouTube or Vimeo when a user interacts with a close button.

Note: This method may not work for all video services or in all browsers, as it depends on the iframe content being reloaded when the src attribute is reset. Additionally, it does not provide feedback on whether the video was successfully stopped.