Skip to content

Instantly share code, notes, and snippets.

@cferdinandi
Last active October 1, 2024 13:35
Show Gist options
  • Save cferdinandi/9044694 to your computer and use it in GitHub Desktop.
Save cferdinandi/9044694 to your computer and use it in GitHub Desktop.
A simple method to stop YouTube, Vimeo, and HTML5 videos from playing.
/**
* Stop an iframe or HTML5 <video> from playing
* @param {Element} element The element that contains the video
*/
var stopVideo = function ( element ) {
var iframe = element.querySelector( 'iframe');
var video = element.querySelector( 'video' );
if ( iframe ) {
var iframeSrc = iframe.src;
iframe.src = iframeSrc;
}
if ( video ) {
video.pause();
}
};
@norama
Copy link

norama commented Apr 28, 2020

Super. It simply works and I would have never figured it out on my own. Thanks. :-)

@knauso
Copy link

knauso commented Apr 30, 2020

Wow, so simple and so powerful :)
At first I was thinking I would need to load both YT and Vimeo API for this but then came across your code.

thanks!

@LuisRodNuezDev
Copy link

LuisRodNuezDev commented May 1, 2020

@Luminicus thank you so much!

@samliew
Copy link

samliew commented May 31, 2020

My updated version to stop all videos on page:

const stopVideos = () => {
  document.querySelectorAll('iframe').forEach(v => { v.src = v.src });
  document.querySelectorAll('video').forEach(v => { v.pause() });
};

(I couldn't use the YouTube postMessage one because some of my YT videos were displayed in a nested iframe via embed.ly)

@ivofrancisco
Copy link

Thank you very much!!

@felix-berlin
Copy link

Thanks that's works pretty good!

@akhilaksaju
Copy link

hey... Is it possible to stop the video instead of pausing the video

@krstrobe
Copy link

Thank you! Awesome!

@droper327
Copy link

droper327 commented Dec 17, 2020

@Luminicus... I love you!........ Thank you so much;

@senorpatricio
Copy link

@Luminicus This was a great help. Thank you for sharing your wisdom!

@margieI
Copy link

margieI commented Jan 15, 2021

@Luminicus Thank you so much!!! Works just perfect!!!!!

@edmarkmagsalin
Copy link

Very useful! Thank you.

@sikaar
Copy link

sikaar commented Feb 2, 2021

Very useful and bug proof , thanks !

@sadewole
Copy link

@Luminicus This outta do it.

/**
 * Stop all iframes or HTML5 <video>'s from playing
 */
var stopVideos = function () {
	var videos = document.querySelectorAll('iframe, video');
	Array.prototype.forEach.call(videos, function (video) {
		if (video.tagName.toLowerCase() === 'video') {
			video.pause();
		} else {
			var src = video.src;
			video.src = src;
		}
	});
};

Thank you so much!

@Luminicus This outta do it.

/**
 * Stop all iframes or HTML5 <video>'s from playing
 */
var stopVideos = function () {
	var videos = document.querySelectorAll('iframe, video');
	Array.prototype.forEach.call(videos, function (video) {
		if (video.tagName.toLowerCase() === 'video') {
			video.pause();
		} else {
			var src = video.src;
			video.src = src;
		}
	});
};

Very helpful. Thanks

@fysherman
Copy link

thanks

@zatarain21
Copy link

Thanks, you really safe me. Great job!!!

@ThreePalmTrees
Copy link

I feel bad for not thinking of this
All I needed was

const iframeSrc = iframe.src;
iframe.src = iframeSrc;

Thanks for sharing :)

@thaynos
Copy link

thaynos commented May 29, 2021

uh what i want to achieve is to pause videos automatically when opening youtube videos cause it gets laggy when i immediatly try to play the video so i want to wait for the cache(?) to load so it would be less laggy. does this script achieve that? how do i use it? i have little to no knowledge in javascript

@OneMohrTime
Copy link

A few modifications to fit into my modujs setup and it worked like a charm! Thank you, this was going to take me all day otherwise!

@nickchauhan
Copy link

@lreisoliveira
Copy link

Great Job! Tks

@thaynos
Copy link

thaynos commented Apr 28, 2022

the enhancer for youtube extensions does an excellent job of this and much more!

@nhanitk14dev
Copy link

Great! thanks bro =)

@1999fronda
Copy link

Thanks for sharing!

@donluismx
Copy link

It worked great.
Additionally I used it inside a pair of JQuery events (a modal close close button click and on the background overlay click).

@GGyll
Copy link

GGyll commented Feb 11, 2023

@Luminicus This outta do it.

/**
 * Stop all iframes or HTML5 <video>'s from playing
 */
var stopVideos = function () {
	var videos = document.querySelectorAll('iframe, video');
	Array.prototype.forEach.call(videos, function (video) {
		if (video.tagName.toLowerCase() === 'video') {
			video.pause();
		} else {
			var src = video.src;
			video.src = src;
		}
	});
};

Thanks man!

@vistree
Copy link

vistree commented May 10, 2023

Hi all, is there a way to call the function when a YouTube or Vimeo or HTML5 video is clicked to play?

@Fezzito
Copy link

Fezzito commented Jul 26, 2023

i tried the two answers and this turnt out to be the best one, in the first one you might enconter the problem of " var iframe = element.querySelector( 'iframe'); is not a function", dont know if it was because of my tsconfig or what.
Also, if you must call the function in several components (wich is my case) you should consider switching var stopVideos to const stopVideos an all the following var to let to avoid scope problems

that being said, amazing approach man, well done

@filipsjostrand
Copy link

My updated version to stop all videos on page:

const stopVideos = () => {
  document.querySelectorAll('iframe').forEach(v => { v.src = v.src });
  document.querySelectorAll('video').forEach(v => { v.pause() });
};

(I couldn't use the YouTube postMessage one because some of my YT videos were displayed in a nested iframe via embed.ly)

Excellent! Thumbs up! d.,.b

@bachoo786
Copy link

does this stop the related videos from showing on a live youtube stream playing on video js player?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment