Stop a Youtube Video with Jquery

Stop a youtube video with jquery?

from the API docs:

player.stopVideo()

so in jQuery:

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

Stop embedded youtube iframe?

Unfortunately these API's evolve very fast. As of May 2015, the proposed solutions don't work anymore, as the player object has no stopVideo method.

A reliable solution is to be found in this page (1) and it works with an:

<iframe id="youtube_player" class="yt_player_iframe" width="640" height="360" src="http://www.youtube.com/embed/aHUBlv5_K8Y?enablejsapi=1&version=3&playerapiid=ytplayer"  allowfullscreen="true" allowscriptaccess="always" frameborder="0"></iframe>

and the following JS/jQuery code:

$('.yt_player_iframe').each(function(){
  this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')
});

How to stop youtube video programmatically in jQuery

Given the older version of jQuery you are using, I assume you are using jQuery Mobile 1.3 not 1.4.

You could use the pagebeforehide event to get the iframe of the page you are leaving and then quickly set the src of the iframe to nothing and then back to the video url. This will stop the video from playing.

var TheFrame;
$(document).on( "pagebeforehide", function( event, data ) { 
    TheFrame = $(event.target).find("iframe");
    setTimeout(StopVideo, 500);
});

function StopVideo(){
    var vid  = TheFrame.prop("src");
    TheFrame.prop("src", "");
    TheFrame.prop("src", vid);    
}

The setTimeout allows the slide transition to complete before messing with the iframe src.

Working DEMO

If you are using jQM 1.4, you can use the pagecontainer widget events instead:

var TheFrame;
$(document).on( "pagecontainerbeforehide", function( event, ui ) { 
    TheFrame = ui.prevPage.find("iframe");
    setTimeout(StopVideo, 500);
});

function StopVideo(){
    var vid  = TheFrame.prop("src");
    TheFrame.prop("src", "");
    TheFrame.prop("src", vid);    
}

Stop YouTube video within iFrame on external Button click

You need to reset the link of the video, i had a similar problem this is how i solved it, i used jQuery in the process.

//First get the  iframe URL
var url = $('#YourIFrameID').attr('src');

//Then assign the src to null, this then stops the video been playing
$('#YourIFrameID').attr('src', '');

// Finally you reasign the URL back to your iframe, so when you hide and load it again you still have the link
$('#YourIFrameID').attr('src', url);

Check this answer

How can you stop a YouTube video from playing in an Iframe with JavaScript or Jquery?

You cannot control a video embedded in an iframe (not counting YouTube's own iframe, of course) if your code isn't running there.

The simplest solution to getting it to stop, though, is to simply remove the iframe altogether.

$('iframe').get(0).remove();

Presumably whatever mechanism put it there in the first place when opening the modal will put it back again if the visitor needs to reopen the same panel again.

Stop youtube video playback on click with jQuery

You can use IFrame player api to pause the video with player.pauseVideo() :

<!-- click on these to switch the videos -->
<div class="home-video-item" data-tab="tab-1">
  video 1 play
</div>
<div class="home-video-item" data-tab="tab-2">
  video 2 play
</div>

<!-- video boxes -->
<div id="tab-1" class="home-video-content current">
  <iframe id="ytplayer0" width="500" height="281" src="https://www.youtube.com/embed/x6kqVusK26c?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>

<div id="tab-2" class="home-video-content current">
  <iframe id="ytplayer1" width="500" height="281" src="https://www.youtube.com/embed/x6kqVusK26c?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>

Javascript in body :

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var players = new Array();
var iframes = document.getElementsByTagName("iframe");

function onYouTubeIframeAPIReady() {
  for (i = 0; i < iframes.length; i++) {
    players[i] = new YT.Player(iframes[i].id, {});
  }
}

$('.home-video-item').on('click', function(e) {
  for (i = 0; i < iframes.length; i++) {
    players[i].pauseVideo();
  }
})

Each time, a tab is clicked, all player are paused.

Here is a working fiddle

Stop YouTube video when div is closed with jQuery

Replace:

<iframe width="1024" height="600" src="//www.youtube.com/embed/zDnVDyVYiv8?autoplay=1" frameborder="0" allowfullscreen></iframe>

To:

<iframe width="1024" height="600" src="//www.youtube.com/embed/zDnVDyVYiv8?autoplay=1" frameborder="0" allowfullscreen id="clearmySound"></iframe>  

Replace Js Code:

$( document ).ready(function() {
    $("#close_box1").click(function(){
    $(".full_page_overlay1").fadeOut();
    $(".cart_over1").fadeOut();
    $("#clearmySound").attr('src','');      
})
});  

JSFIDDLE DEMO

---

Related Topics