A simple method to stop YouTube, Vimeo, and HTML5 videos from playing.

stop-video.js

/**
 * 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();
	}
};

Gracias, la función me sirvió. Buen trabajo!!

@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!

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

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!

@Luminicus thank you so much!

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)

Thank you very much!!

Thanks that's works pretty good!

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

Thank you! Awesome!

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

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

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

Very useful! Thank you.

Very useful and bug proof , thanks !

@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

thanks

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

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

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

Thanks for sharing :)

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

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!

You can pause all videos, check out here.
https://gist.github.com/nickchauhan/0cf83516379ac7d545698af40b3d6ece

Great Job! Tks

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

Great! thanks bro =)

Thanks for sharing!

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).

@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!

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

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