Last active
February 15, 2024 17:03
-
-
Save cferdinandi/9044694 to your computer and use it in GitHub Desktop.
A simple method to stop YouTube, Vimeo, and HTML5 videos from playing.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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(); | |
} | |
}; |
@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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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).