Stop Embedded Youtube Iframe

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

Stop any embeded YouTube iframe when another is played

After creating players push them onto an array.

    var vids =[];
    player1 = new YT.Player('player1', {
     //stuff
    });
    vids.push(player1);

    player2 = new YT.Player('player2', {
     // stuff
    });
    vids.push(player2);

    ....
    ..
    playerN = new YT.Player('playerN', {
     // stuff
    });
    vids.push(playerN);

Every player object's id can be accessed by its a.id property(a is itself an object , id is a property(string) )

Now when user plays a given player you have to just pause all other except the one being played(id of which you get in stopVideo).Since you have id it's easy

 function stopVideo(player_id) {
  for(var i=0;i<vids.length;i++){
    if (player_id !=vids[i].a.id)    
      vids[i].stopVideo();
  }
 }

Example : - http://jsfiddle.net/4t9ah1La/

If you are not creating player through scripts but rather just embedding iframes then this answer mentioned by vbence is enough , below is a demo of that with improvements suggested by Jennie

Example : - http://jsfiddle.net/fyb7fyw1/

All credits to respective original authors

How to disable related videos from an embedded youtube playlist

If I look through the YouTube Embedded Players and Player Parameters docs, there is no such thing to order the more videos section if you pause the video.

The two parameters I suggest to get near as possible to your goal is:

You can add:

• listType=playlist
• rel=0 to turn off related videos from the more videos section.

Note: The behaviour of rel=0 will be removed after September 25, 2019.

---

Conclusion:

It seems like what you want to achieve is not possible. With the default embed iframe of YouTube.

You might want to consider to look to other players with playlist options. Something like JW Player note that you need a licence for this player, JW Player playlist docs. I did some reading on JW Player as well, they currently don't support YouTube videos.

But maybe there are other players that have the same functionally for free.

How can I pause an embedded Youtube video with vanilla Javascript?

I found the solution: as described in this answer, you need to add ?enablejsapi=1 to the video URL

A: You have to add ?enablejsapi=1 at the end of your URL: /embed/vid_id?enablejsapi=1

Somehow, it doesn't work with my snippet but works in my real case.

Pausing an Youtube iframe with js

It seems that with the current Youtube API you have to do more than just add enablejsapi as a get parameter to the embed. You actually have to include the API script from here and also use the custom methods. You can take a look at the below code or run this working JSFiddle:

<iframe id="music" width="310" height="310" src="https://www.youtube.com/embed/v_FucrYWy3k?rel=1&controls=1&showinfo=0&start=1&autoplay=1&enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<button id='button' type="button" name="button">mute</button>

And the JS code:

//create the script for the API and append it to the DOM
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 player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('music', {
    events: {
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {
  document.getElementById('button').addEventListener('click', function() {
    player.pauseVideo();
  })
}

It's all in the docs here.

How to stop embedded Youtube videos

Use:

$('#videoscreen iframe').each(function() {

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

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

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

working fiddle

How can I stop an embedded iframe youtube video from playing when a modal is closed?

I just created two video urls, one with autoplay and one without and then just toggled between two and it is working for me :

var video = "https://www.youtube.com/embed/ogfYd705cRs";
var autoVideo = video + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";

$(".custom-modal").on("hidden.bs.modal", function (e) {
  var iframe = $('#' + e.target.id).find("iframe");
  iframe.attr("src", video);
})

$(".custom-modal").on("show.bs.modal", function (e) {
  var iframe = $('#' + e.target.id).find("iframe");
  iframe.attr("src", autoVideo);
});

So why not storing video URL in a data attribute ?

<iframe class="modal-iframe" type="text/html" width="640" height="360" src="" data-video="https://www.youtube.com/embed/ogfYd705cRs" frameborder="0"></iframe>

and then get video URLs inside the functions :

$(".custom-modal").on("hidden.bs.modal", function (e) {
    var iframe = $('#' + e.target.id).find("iframe");
    var video = iframe.attr("data-video");
    iframe.attr("src", video);
})

$('.custom-modal').on('show.bs.modal', function (e) {
    var iframe = $('#' + e.target.id).find("iframe");
    var autoVideo = iframe.attr("data-video") + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";
    iframe.attr("src", autoVideo);
});

And for multiple videos per modal put video URL on anchors you use for opening modals:

<a href="modals/somemodal.html" class="video-anchor" data-target="#modal1" data-video="https://www.youtube.com/embed/ogfYd705cRs" data-toggle="modal">

and instead listening for modal open listen for anchor click and :

$(".video-anchor").click(function () {
  var modal = $(this).data("target");
  var video = $(this).attr("data-video");
  var autoVideo = video + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";
  $(modal + ' iframe').attr('src', autoVideo);
});

and when modal closes it is not important what we set as src so :

$(".custom-modal").on("hidden.bs.modal", function (e) {
  var iframe = $('#' + e.target.id).find("iframe");
  iframe.attr("src", "");
})

---

Related Topics