How to allow play only one embedded YouTube video on page?

Question

I have a few embedded YouTube videos on my page:

            <div class="video_block">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/4LaUVEF9GTs?rel=0" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>

            <div class="video_block">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/JYZ_oP7QVSY?rel=0" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>

How to avoid playing several videos at the same time if user press play button in all videos? Thank you for any suggestions or ideas in advance.

Why not just have one player and display thumbs of the videos? That way only one video will play at a time... You can have full control over the player if you look at youtubes API https://developers.google.com/youtube/iframe_api_reference — NewToJS, Oct 22 '16 at 12:51
You are using the usual iframes without yt player api iframes are by default sandboxed so directly there is no way to know the state of video unless you go for postmessage api — Vinay, Oct 22 '16 at 14:54
?autoplay=1 autoplays the video and ?autoplay=0 does not, you have to hit play. — mlegg, Oct 22 '16 at 21:35
I have same question, I have multiple videos on one page and I want to allow only one to play. Page is for kids, so I can expect some of them won't know that they have to pause video before playing another one. — Ady96, Apr 16 '18 at 00:54
Duplicate of this? https://stackoverflow.com/questions/14942916/pause-youtube-iframe-embed-when-playing-another (Cannot vote to close while there is a bounty on it) — BoffinBrain, Apr 18 '18 at 13:58

ansibly · Answer 1 · 2018-04-17T21:29:14.043

Here's a quick YouTube player manager sketch that you can adapt to your needs. A couple of quick notes:

You can also use the API to programmatically embed each iframe. This example assumes that the iframe elements are already on the page.
If (as with this example) you utilize already embedded players then make sure you append '?enablejsapi=1' to the end of the embed URL.
Essentially this manager keeps track of the registered videos. If it detects that a registered video begins to play it will pause any other registered video that is currently playing.

API Reference: https://developers.google.com/youtube/iframe_api_reference

UPDATE: Changed the example to use pauseVideo vs. stopVideo.

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 ytPlayerManager = (function YTPlayerManager() {
  var players = [],
      PLAYING = 1;

  function register(id) {
    players.push({
      id: id,
      player: makePlayer(id)
    });
  }

  function makePlayer(id) {
      return new YT.Player(id, {
        events: {
          'onStateChange': function(event) {
            if(event.data == PLAYING) {
              videoPlaying(id);
            }
          }
        }
      });
  }

  function videoPlaying(id) {
    players.forEach(function(item) {
      if(item.id !== id) {
        item.player.pauseVideo();
      }
    });
  }

  return { register };
})();

function onYouTubeIframeAPIReady() {
  ytPlayerManager.register('video1');
  ytPlayerManager.register('video2');
  ytPlayerManager.register('video3');
}

score 2 · Answer 2 · answered Apr 16 '18 at 04:23

You need to use youtube api to have the full control over the videos and you can generate videos.

so you will be able to stop the others if one is playing

onStateChange

This event fires whenever the player's state changes. The data property of the event object that the API passes to your event listener function will specify an integer that corresponds to the new player state. Possible values are:

-1 (unstarted)
0 (ended)
1 (playing)
2 (paused)
3 (buffering)
5 (video cued).

When the player first loads a video, it will broadcast an unstarted (-1) event. When a video is cued and ready to play, the player will broadcast a video cued (5) event. In your code, you can specify the integer values or you can use one of the following namespaced variables:

YT.PlayerState.ENDED
YT.PlayerState.PLAYING
YT.PlayerState.PAUSED
YT.PlayerState.BUFFERING
YT.PlayerState.CUED

example :

window.onYouTubePlayerAPIReady = function(){
        var player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'M7lc1UVf-VE',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }


 function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }

src is here

I hope it will helps

Murat Yıldız · Answer 3 · 2023-02-07T21:21:35.253

0

If you embed as HTML, try this:

<div style="text-align: center; margin: auto">
<iframe width="640" height="360" src="http://www.youtube.com/embed/abdcefg? 
    border=1&amp; rel=0&amp; showsearch=0&amp; version=3&amp;
    modestbranding=1&amp; fs=1" frameborder="0" allowfullscreen>
</iframe>
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="false" />
</div>

edited Feb 07 '23 at 21:21

answered Apr 19 '18 at 12:23

Murat Yıldız

11,299
6
63
63

Iglesias Leonardo · Answer 4 · 2022-01-20T19:06:49.933

Considering your code:

<div class="video_block">
    <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/4LaUVEF9GTs?rel=0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

<div class="video_block">
    <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/JYZ_oP7QVSY?rel=0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

Through this implementation, you will not need to define the identification of iframes or store many players in the memory. You just need to store the last iframe played.

Insert this script before using any function related to the Youtube iframe api.

<script src="https://www.youtube.com/iframe_api"></script>

If you're using an iframe directly on html, then append "enablejsapi=1" and your websites origin, in the iframe sources url parameters in all your iframe sources. Like this:

<iframe id="video_player" src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1&origin=https://example.com"></iframe>

You can choose to "pauseVideo" or "stopVideo", in 'postMessage' method, of the following implementation:

var playedVideoIframe = false;

function onYouTubeIframeAPIReady() {
    const IFRAMES = document.getElementsByTagName('iframe');
    generatePlayers(IFRAMES);
}

function generatePlayers(IFRAMES) {
    for (const IFRAME of IFRAMES) {
        if (IFRAME.src.includes('youtube')) {
            new YT.Player(IFRAME, {
                events: {
                    'onStateChange': onPlayerStateChange
                }
            });
        }
    }
}

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
        const PLAYING_VIDEO_IFRAME = event.target.h;
        pauseLastPlayedVideo(PLAYING_VIDEO_IFRAME);
        playedVideoIframe = PLAYING_VIDEO_IFRAME;
    }
}

function pauseLastPlayedVideo(PLAYING_VIDEO_IFRAME) {
    if (playedVideoIframe && playedVideoIframe.src != PLAYING_VIDEO_IFRAME.src) {
        playedVideoIframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
    }
}

Need more help? Read the documentation on https://developers.google.com/youtube/iframe_api_reference

How to allow play only one embedded YouTube video on page?

4 Answers4