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

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.

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();  });});