Can't play YouTube video through iframe API when video is unmute

Question

Since Chrome update to version 72, my custom player that runs over the YouTube Iframe API stopped working. It still works perfectly on Firefox or Chrome <= 71.

Using the code below, when function play() is triggered, the video starts buffering and then stops, without playing.

function onYouTubeIframeAPIReady() {
  ytIframe = $("#player")[0];
  ytPlayer = new YT.Player(ytIframe, {
    events: {
      'onReady': () => {},
      'onStateChange': () => {}
    }
  });
}

function play() {
  ytPlayer.playVideo();
}

The only way to make it work is to embed the video using the mute=1 url param on the iframe src. But even when I do this, if I try to unmute the player after the playVideo (using ytPlayer.unMute()), the video stops again.

Any ideas on what has changed with this Chrome 72 update? Is this a YouTube/Chrome bug or is it an expected behavior?

Thanks!

Wahl

If i'm not mistaken, chrome does not like iframes, it's been a bit since i've used them but as far as I can tell after a quick google search there is a chrome plugin that allows you to enable it. – Adversative

Answer 1

"player.play()" doesn't work on latest version chrome, we can solve the issue by adding the allow="autoplay" attribute to your parent iframe

To know the root cause, you can check: "What's changing?" @ https://developers.google.com/web/updates/2019/01/user-activation

Inoperable

For more information, iframe and its attributes, features list that is can be use with allow attribute. – Acarology

Answer 2

You describe the new Chrome behavior.

You now have to click into the iframe manually - either to start playing or to unmute.

To use "autoplay," you have to use "mute" as well. Make sure not to disable "controls," because the user has to click the loudspeaker symbol to enable sound.

Wally