Stop embedded youtube iframe?

how to stop embedded youtube videos from playing simultaneously
pause youtube iframe embed when playing another
pause youtube video jquery iframe
youtube iframe api
stop iframe video on modal close
onyoutubeplayerapiready
youtube embed loop
onplayerstatechange

I'm using YouTube iframe to embed videos on my site.

<iframe width="100%" height="443" class="yvideo" id="p1QgNF6J1h0"
              src="http://www.youtube.com/embed/p1QgNF6J1h0?rel=0&controls=0&hd=1&showinfo=0&enablejsapi=1"
              frameborder="0" allowfullscreen>
</iframe>

And i have multiplie videos on the same page.

I want to stop all of them or one of them in a click of a button using javascript or so.

Is it possible?

UPDATE:

I tried what Talvi Watia said and used:

$('#myStopClickButton').click(function(){
  $('.yvideo').each(function(){
    $(this).stopVideo();
  });
});

I'm getting:

Uncaught TypeError: Object [object Object] has no method 'stopVideo' 

You may want to review through the Youtube JavaScript API Reference docs.

When you embed your video(s) on the page, you will need to pass this parameter:

http://www.youtube.com/v/VIDEO_ID?version=3&enablejsapi=1

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.

$('#myStopClickButton').click(function(){
  $('.myVideoClass').each(function(){
    $(this).stopVideo();
  });
});

I would like to stop a youtube video and return to the website where the html5 code is embedded. Is this possible? Thanks. Randall Martin. However in September 2018, YouTube changed their embed code so that this rel=0 trick no longer fully removes the related videos (instead it makes it so the related videos come from the same YouTube channel as the video displayed). It is no longer possible to fully disable related videos using rel=0.

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":""}', '*')
});

. src = ''; The downside is that you have to keep track of the url. The Loading a video player section has been updated to point out that when inserting the <iframe> element that will contain the YouTube player, the IFrame API replaces the element specified in the constructor for the YouTube player. This documentation change does not reflect a change in the API and is intended solely to clarify existing behavior.

If anyone is still looking for the answer, i've solved it like so:

$("#photos").on("hide",function(){
    var leg=$('.videoPlayer').attr("src");
    $('.videoPlayer').attr("src",leg);
});

Where #photos is the ID of the modal and .videoPlayer is the class of the iframe. Basically it refreshes the src attribute (and stops playing the video). So,

    $('#myStopClickButton').click(function(){
      $('.yvideo').each(function(){
        var el_src = $(this).attr("src");
        $(this).attr("src",el_src);
      });
    });

should do the trick.

Soooo what do you do? Well, here's a quick YouTube embed hack to make embedded YouTube videos start and stop when you want. Normally  Sometimes a client wants to embed a YouTube video on their site but they only want a segment of the video (for whatever reason), not the entire thing. Soooo what do you do? Well, here’s a quick YouTube embed hack to make embedded YouTube videos start and stop when you want. Normally when you creating YouTube embed code it looks something like

APIs are messy because they keep changing. This pure javascript way worked for me:

 <div id="divScope" class="boom-lightbox" style="display: none;">
    <iframe id="ytplayer" width="720" height="405"   src="https://www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allowfullscreen>    </iframe>
  </div>  

//if I want i can set scope to a specific region
var myScope = document.getElementById('divScope');      
//otherwise set scope as the entire document
//var myScope = document;

//if there is an iframe inside maybe embedded multimedia video/audio, we should reload so it stops playing
var iframes = myScope.getElementsByTagName("iframe");
if (iframes != null) {
    for (var i = 0; i < iframes.length; i++) {
        iframes[i].src = iframes[i].src; //causes a reload so it stops playing, music, video, etc.
    }
}

Embed a YouTube player in your application. below creates an embedded player that will load a video, play it for six seconds, and then stop the playback. It worked like a charm. To have an embedded YouTube video begin playing at a specific timestamp, first calculate the start point in total number of seconds (60 times the number of minutes plus the number of seconds), then do the same for the end point. Grab the embed code from YouTube, by clicking on Share > Embed.

Talvi's answer may still work, but that Youtube Javascript API has been marked as deprecated. You should now be using the newer Youtube IFrame API.

The documentation provides a few ways to accomplish video embedding, but for your goal, you'd include the following:

//load the IFrame Player API code asynchronously
var tag = document.createElement('script');

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

//will be youtube player references once API is loaded
var players = [];

//gets called once the player API has loaded
function onYouTubeIframeAPIReady() {
    $('.myiframeclass').each(function() {
        var frame = $(this);

        //create each instance using the individual iframe id
        var player = new YT.Player(frame.attr('id'));

        players.push(player);
    });
}

//global stop button click handler
$('#mybutton').click(function(){

    //loop through each Youtube player instance and call stopVideo()
    for (var i in players) {
        var player = players[i];
        player.stopVideo();
    }
});

Greetings Webflow Community, I'm trying to figure out a way to close/stop a video from playing if the modal is closed because currently the  The standard embed code for YouTube uses the IFRAME tag and the width and height of the video player are hard-coded thus making the player non-responsive. The new on-demand embed code for YouTube is slightly different.

To have an embedded YouTube video begin playing at a specific timestamp, first calculate the start point in total number of seconds (60 times  Also, videos should be embedded using the standard click-to-play embed and not a scripted play. Revenue sharing for embedded videos. Only YouTube and the video owner will earn revenue from ads on embedded videos; the site owner where the video is embedded will not earn a share.

I'm hoping someone has an idea to stop this happen! The video EDIT Had to remove iframe YouTube embed as it won't show the code here! This document explains how to embed a YouTube player in your application and also defines the parameters that are available in the YouTube embedded player. By appending parameters to the IFrame URL, you can customize the playback experience in your application. For example, you can automatically play videos using the autoplay parameter or cause

tag.src = "https://www.youtube.com/iframe_api";. 11. var firstScriptTag = document​.getElementsByTagName('script')[0];. 12. firstScriptTag.parentNode. A simple method to stop YouTube, Vimeo, and HTML5 videos from playing. - stop-video.js

Comments
  • But i will need to create an object for each player? Will the stopVideo() just work without any prior setups ?
  • If you add enablejsapi=1 to the embed you should be able to reference the API. It will need to be added for every video.
  • I'm getting: Uncaught TypeError: Object [object Object] has no method 'stopVideo'
  • stackoverflow.com/questions/9310112/… has information about the cross-site prtection error. (normally a huge issue in chrome.) as for the second, you need to change .myVideoClass with the class attached to your embed. i.e. .yvideo
  • @Danpe It appears a full working example can be found here: stackoverflow.com/questions/7443578/…
  • With which version of the API have you falsified this solution? Have you found an alternative?
  • I would like to emphasize that your embed url MUST have enablejsapi=1, otherwise this doesn't work. Details here developers.google.com/youtube/player_parameters#enablejsapi I spent some time when I realized why this answer doesn't work.
  • This is still working as of 5/2018. Fixed a cosmetic typo in the js code.
  • For some reason I had to pass it to the src link for it to work: src="youtube.com/embed/…"
  • @MarcoFaustinell i found the command, it is: unMute. Its case sensitive, so watch out for the cases.
  • I think this is the best option when you load iframes dinamically.