How to mute multiple youtube videos when they are autoplaying?

Question

How can I mute multiple youtube videos when they are autoplaying?

My code:

    <iframe id="ytplayer0" src="https://www.youtube.com/embed/ab0TSkLe-E0?controls=1&showinfo=0&rel=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>

    <script>
    // http://jsfiddle.net/BFDKS/966/
    // http://stackoverflow.com/questions/24868226/how-do-you-mute-an-embedded-youtube-player
    // 2. This code loads 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);

    var player;

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

    function onPlayerReady() {
        player.playVideo();
        // Mute!
        player.mute();
    }
    </script>

    <iframe id="ytplayer1" src="https://www.youtube.com/embed/QVGeilNsJFU?controls=1&showinfo=0&rel=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>

    <script>
    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('ytplayer1', {
            events: {
                'onReady': onPlayerReady
            }
        });
    }

    function onPlayerReady() {
        player.playVideo();
        // Mute!
        player.mute();
    }
    </script>

Result:

It only mutes and autoplays the second one...

Any ideas?

jsfiddle

score 1 · Accepted Answer · edited May 23 '17 at 11:53

You may want to create two players but onYouTubeIframeAPIReady will be called only once. Applying this method, you can do like this :

Javascript (in <head></head>) :

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 players_attr = new Array();

players_attr["ytplayer0"] = {
  events: {
    'onReady': onPlayer1Ready
  }
};
players_attr["ytplayer1"] = {
  events: {
    'onReady': onPlayer2Ready
  }
};

function onYouTubeIframeAPIReady() {
  for (key in players_attr) {
    players[key] = new YT.Player(key, players_attr[key]);
  }
}

function onPlayer1Ready() {
  players["ytplayer0"].playVideo();
  players["ytplayer0"].mute();
}

function onPlayer2Ready() {
  players["ytplayer1"].playVideo();
  players["ytplayer1"].mute();
}

HTML :

<iframe id="ytplayer0" src="https://www.youtube.com/embed/ab0TSkLe-E0?controls=1&showinfo=0&rel=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>

<iframe id="ytplayer1" src="https://www.youtube.com/embed/QVGeilNsJFU?controls=1&showinfo=0&rel=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>

players array contains the players object
players_attr array contains the players attributes

The key for both array is the player name eg ytplayer0 & ytplayer1

You can find a fiddle here

How to mute multiple youtube videos when they are autoplaying?

1 Answers1