Stop YouTube video using jquery?

Question

I have a jquery slider that I created, basically only three panels that slide by applying negative values ​​to the left of CSS. Works great, but I have a YouTube video on one slide that doesn't stop when I crawl. I tried displaying: no and visibility: hidden, which works in all but IE, the sound continues to work in IE.

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

Answer 1

from the API docs :

player.stopVideo() 

so in jQuery:

 $('#playerID').get(0).stopVideo(); 

Answer 2

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

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

Answer 3

1. enable

 <script type="text/javascript" src="http://www.youtube.com/player_api"></script> 

2.add your youtube iframe.

 <iframe id="player" src="http://www.youtube.com/embed/YOURID?rel=0&wmode=Opaque&enablejsapi=1" frameborder="0"></iframe> 

3.magical time.

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

Answer 4

I had this problem before, and the conclusion that I came up is that the only way to stop the video in IE is to remove it from the DOM.

Answer 5

To start a video

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

To stop the video

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

You can replace "& autoplay = 1" with "? Autoplay = 1" if there are no additional parameters

works for both vimeo and youtube on FF and Chrome

Answer 6

I had the same problem. After many alternatives, I did only reset embed src = "" with the same URL.

Code snippet:

  $("#videocontainer").fadeOut(200);<br/> $("#videoplayer").attr("src",videoURL); 

I was able to at least stop the video from playing when I hide it. :-)

Answer 7

My solution, which works for the modern YouTube embed format, is as follows.

Assuming your iframe playing your video with id="#video" , this simple Javascript bit will do the job.

 $(document).ready(function(){ var stopVideo = function(player) { var vidSrc = player.prop('src'); player.prop('src', ''); // to force it to pause player.prop('src', vidSrc); }; // at some appropriate time later in your code stopVideo($('#video')); }); 

I saw suggested solutions to this problem related to the use of the YouTube API , but if your site is not an https site, or your video is embedded in a modern format recommended by YouTube, or if you have no-cookies , then these solutions do not work, and instead of your video you get the effect of the "TV channel dead channel".

I tested above in every browser I could rely on, and it works very reliably.

Answer 8

Unfortunately, if the id attribute of the object tag does not exist, play / stop / pauseVideo () does not work IE.

 <object style="display: block; margin-left: auto; margin-right: auto;" width="425" height="344" data="http://www.youtube.com/v/7scnebkm3r0&amp;fs=1&amp;border=1&amp;autoplay=1&amp;enablejsapi=1&amp;version=3" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="allowfullscreen" value="true" /> <param name="src" value="http://www.youtube.com/v/7scnebkm3r0&amp;fs=1&amp;border=1&amp;autoplay=1&amp;enablejsapi=1&amp;version=3" /> </object> <object id="idexists" style="display: block; margin-left: auto; margin-right: auto;" width="425" height="344" data="http://www.youtube.com/v/pDW47HNaN84&amp;fs=1&amp;border=1&amp;autoplay=1&amp;enablejsapi=1&amp;version=3" type="application/x-shockwave-flash"> <param name="allowscriptaccess" value="always" /> <param name="allowFullScreen" value="true" /> <param name="src" value="http://www.youtube.com/v/pDW47HNaN84&amp;fs=1&amp;border=1&amp;autoplay=1&amp;enablejsapi=1&amp;version=3" /> </object> <script> function pauseVideo() { $("object").each ( function(index) { obj = $(this).get(0); if (obj.pauseVideo) obj.pauseVideo(); } ); } </script> <button onClick="pauseVideo();">Pause</button> 

Give it a try!

Answer 9

Well, there is a much easier way to do this. When you grab the link for youtube videos, scroll down a bit and you will see several options: iFrame Embed, use old embedded, linked videos, etc. There, select Use old link to insert. This solves the problem.

Answer 10

This works for me on both YouTube and Vimeo. I just simply reload the src attribute, so keep in mind that the video will revert to the beginning.

 var $theSource = $theArticleDiv.find('.views-field-field-video-1 iframe').attr('src'); $theArticleDiv.find('.views-field-field-video-1 iframe').attr('src', $theSource); //reset the video so it stops playing 

$ theArticleDiv is my current video container, since I have several videos on the page and they are displayed through the Drupal view at runtime, I don’t know what their identifiers will be. So I connected the muy click event with the currently visible element, found its parent and decided that $ theArticleDiv.

('. views-field-field-video-1 iframe') finds the current video clip for me - in particular the one that is visible right now. This iframe has an src attribute. I just pick it up and reset back to what it already was, and automatically the video stops and goes back to the beginning. If my users want to pause and resume, they can do it without closing the video, of course, but frankly, if they close the video, I feel that they can live with the fact that it is reset to the beginning.

NTN

Answer 11

It took me a bit of intelligence to figure this out, but I solved this cross-browser implementation:

HTML

 <div class="video" style="display: none"> <div class="mask"></div> <a href="#" class="close-btn"><span class="fa fa-times"></span></a> <div class="overlay"> <iframe id="player" width="100%" height="70%" src="//www.youtube.com/embed/Xp697DqsbUU" frameborder="0" allowfullscreen></iframe> </div> </div> 

JQuery

 $('.launch-video').click(function() { $('.video').show(); $("#player").attr('src','//www.youtube.com/embed/Xp697DqsbUU'); }); $('.close-btn').click(function() { $('.video').hide(); $("#player").attr('src',''); }); 

Essentially, it’s opening my lightbox and filling in my src attribute, and when closing, just delete the src value (then re-run it when you open it).

Answer 12

I got this to work in all modern browsers, including IE9 | IE8 | IE7 The following code will open your YouTube video in the jQuery UI modal dialog box, automatically start the video from 0:00 in the dialog box, and stop the video in the dialog box.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load("swfobject", "2.1"); function _run() { /* YouTube player embed for modal dialog */ // The video to load. var videoID = "INSERT YOUR YOUTUBE VIDEO ID HERE" // Lets Flash from another domain call JavaScript var params = { allowScriptAccess: "always" }; // The element id of the Flash embed var atts = { id: "ytPlayer" }; // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/) swfobject.embedSWF("http://www.youtube.com/v/" + videoID + "?version=3&enablejsapi=1&playerapiid=player1&autoplay=1", "videoDiv", "879", "520", "9", null, null, params, atts); } google.setOnLoadCallback(_run); $(function () { $("#big-video").dialog({ autoOpen: false, close: function (event, ui) { ytPlayer.stopVideo() // stops video/audio on dialog close }, modal: true, open: function (event, ui) { ytPlayer.seekTo(0) // resets playback to beginning of video and then plays video } }); $("#big-video-opener").click(function () { $("#big-video").dialog("open"); return false; }); }); </script> <div id="big-video" title="Video"> <div id="videoDiv">Loading...</div> </div> <a id="big-video-opener" class="button" href="#">Watch the short video</a> 

Answer 13

In fact, you only need javascript and properly embed youtube video with swfobject google library

That's an example

 <script type="text/javascript" src="swfobject.js"></script> <div style="width: 425; height: 356px;"> <div id="ytapiplayer"> You need Flash player 8+ and JavaScript enabled to view this video. </div> <script type="text/javascript"> var params = { allowScriptAccess: "always" }; var atts = { id: "myytplayer" }; swfobject.embedSWF("http://www.youtube.com/v/y5whWXxGHUA?enablejsapi=1&playerapiid=ytplayer&version=3", "ytapiplayer", "425", "356", "8", null, null, params, atts); </script> </div> 

After that, you can call the following functions:

 ytplayer = document.getElementById("myytplayer"); ytplayer.playVideo(); ytplayer.pauseVideo(); ytplayer.stopVideo(); 

Answer 14

if you have autoplay property in iframe src, it will not help reload src attr / prop, so you need to replace autoplay = 1 with autoplay = 0

  var stopVideo = function(player) { var vidSrc = player.prop('src').replace('autoplay=1','autoplay=0'); player.prop('src', vidSrc); }; stopVideo($('#video')); 

Answer 15

if you sometimes use playerID.stopVideo (); doesn't work, here's the trick

  function stopVideo() { playerID.seekTo(0); playerID.stopVideo(); } 

Answer 16

Just.

include the following line in the function to close pop.

 $('#youriframeid').remove();