Stop a youtube video with jquery?

Related searches

I have a jquery slider that I have built, basically just three pannels that slide by applying negative left CSS values. Works great, but I have a youtube video in one slide that wont stop when I slide. I've tried display:none and Visibility:hidden which works in all but IE, the audio keeps going in IE.

Is there an easy way to kill a video with jquery?

from the API docs:


so in jQuery:


Stop YouTube iframe video playback jQuery, A simple way to stop YouTube iframe video from playing. Can use onclick function to trigger behavior when someone clicks on another video. YouTube Inview Autoplay is a jQuery plugin which automatically plays / stops Youtube video s when they become visible and disappear on vertical page scrolling.

This solution is simple, elegant and works in all browsers:

var video = $("#playerid").attr("src");

Stop Embedded Youtube Video Iframe, Stop an iframe or HTML5 <video> from playing. * @param {Element} element The element that contains the video. */. var stopVideo = function ( element ) {. Stopping videos with JavaScript Those scripts have all been updated with a new function that stops or pauses YouTube, Vimeo and HTML5 videos when the content area is closed. If you’re interested in adding something like that to your scripts, here’s how it works.


<script type="text/javascript" src=""></script>

2.add your youtube iframe.

<iframe id="player" src="" frameborder="0"></iframe>

3.magic time.

            var player;
            function onYouTubePlayerAPIReady() {player = new YT.Player('player');}
            //so on jquery event or whatever call the play or stop on the video.
            //to play player.playVideo();
            //to stop player.stopVideo();

Youtube Stop Video - jQuery - JSFiddle, this is because the div is close but the youtube video is not stopped. How can I stop playing of the youtube video when a user click to close the� I'm building a jquery ajax page that shows a list of youtube videos. I've got two views on the page (list & video), which are built as LI elements, floated left, inside a UL element. I built it this way because the transition between the views is done using a horizontal slide effect and I found that using the list allows the page to vertically

To start video

var videoURL = $('#playerID').prop('src');
videoURL += "&autoplay=1";

To stop video

var videoURL = $('#playerID').prop('src');
videoURL = videoURL.replace("&autoplay=1", "");

You may want to replace "&autoplay=1" with "?autoplay=1" incase there are no additional parameters

works for both vimeo and youtube on FF & Chrome

A simple method to stop YouTube, Vimeo, and HTML5 videos from , To obtain a reference to the player and then stop the video use the following code: var myPlayer = document.getElementById('playerid'); myPlayer.stopVideo(); share. Share a link to this answer. Copy link.

I've had this problem before and the conclusion I've come to is that the only way to stop a video in IE is to remove it from the DOM.

Close div and stop youtube displayed in that div, Then you can select it via $("#vid1") with hash mark (#), id selector in jquery. If a video element is exposed in function,then you have access to HtmlVideoElement (HtmlMediaElement).This elements has control over video element,in your case you can use pause() method for your video element. Check reference for VideoElement here.

If you want a stop all videos button, you can setup a javascript routine to loop through your videos and stop them: player.stopVideo() This does involve keeping track of all the page IDs for each video on the page. Even simpler might be to make a class and then use jQuery.each.

If you’ve ever had a YouTube video continue to play after closing the lightbox it was displayed in, you know it can be a very annoying bug to fix. The below code snippet will fix this issue. This method applies to the facebox script but can easily be applied to just about any lightbox modal that has an event to attach to when closing the modal.

I need some help with Youtube API and embeded videos. I want to stop video when clicked on some element (div,link,td etc.). I am trying to get it work just for 1 video now, but the final function of this script should be to stop all videos loaded on current page.

  • i am not using any api..just the iframe can i stop it?
  • checkout my solution on below link
  • this simple solution still works:…
  • Wow, that easy? What would my player ID be? <object width="853" height="505"><param name="movie" value="… name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="853" height="505"></embed></object>
  • actually, it seems to be more complicated than I first thought. It requires flash 8+ and you need to add "&enablejsapi=1" to the url. Then you have to figure out whether to call the function on the embed tag or the object tag
  • I'm not able to get this to work. Why do you have to use .get(0) in this example? Also confusing is that in the example at - the methods called on the links that control the video are <a onclick="stop();" href="javascript:void(0);">Stop</a>. So it uses "stop();" as opposed to "stopVideo();". I wasn't able to get either to work though.
  • @Mike I'm not sure about the differences between stop and stopVideo. The .get(0) is to get a DOM element from the jQuery object.
  • Awesom solution. To wesbos: PlayerID is not ID of youtube iframe but div around youtube iframe. For example - <div id="playerID"><object width="853" height="505">........</object></div>
  • awesome solution, works perfectly if you don't mind reseting the video.
  • This worked perfectly for me. I tried the other solutions on this page but could not get any of them to work due to mismatch between http and https.
  • What's amazing about this solution is that I just used it over 3 years after it was suggested, and its still the easiest one I found to implement.
  • This is by far the most elegant and easy to implement solution I found to this very same question that was plaguing. 6 hours of googling and trial and error, and then I found this gem. Only reason I could see this NOT working for folks, is if they need the video paused.
  • Hey guys. I can't seem to get this one working and from what I can tell, it's because the modal code opens below where I have this code added. I have included the code just about the closing <body> tag, but when I click on the link to activate the popup, the resulting modal code is triggering below the pasted JS code. Does anyone know why this would be?