Cannot autoplay YouTube on mobile devices

Question

So I cannot autoplay a YouTube video due to this update which prevents videos that aren't muted from playing on mobile: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

I've tried setting mute=1 and volume=0 in my Video URL. The mute parameters does successfully mute the video on Desktop, but I still cannot get the video to autoplay on mobile. The reason I need autoplay to work is because I am loading an image of the video on the initial page load. Once the user clicks the video, my JavaScript loads the iframe. This significantly helps the performance of my page. There are several other questions on Stack Overflow that are related but none of the answers have worked.

Here is my current code:

<iframe width="560" height="315" src="https://www.youtube.com/embed/QHfgMrpMOm4?autoplay=1&mute=1" volume="0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

you can check this answer in ios the autoplay not going to work without the user interaction. stackoverflow.com/questions/15090782/… — Chilll007

Alexandr Alexandr · Accepted Answer · 2020-03-05T13:43:30

Had same issue, looks like something changed. Only solution, that worked for me was - use youtube API

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('player', {
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onPlayerReady,
    }
  });
}

function onPlayerReady(event) {
  event.target.mute();
  event.target.playVideo();
}

<!DOCTYPE html>
<html>

<body>
  <div id="player"></div>
</body>

</html>

Cannot autoplay YouTube on mobile devices

1 Answers