Youtube Iframe Embed won't autoplay on mobile

Question

I need to make a Youtube embed autoplay on a page. Usually setting autoplay=1 would work if it was paired with mute=1 in the query string params.

This actually works fine on desktop, but it doesn't work on either Android or iPhone, no matter which browser.

Did something change with the autoplay policies which would totally disable autoplay on mobile?

Reproducable demo here - https://codepen.io/gogo_rulez/pen/YzYyXZL

<iframe width="560" height="315" src="https://www.youtube.com/embed/5UZND2KnuP4?mute=1&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; autostop; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

I believe it needs user interaction in mobile devices in order to autoplay videos - you can check and try any of the answers shown [here](https://stackoverflow.com/a/15093243/12511801) — Marco Aurelio Fernandez Reyes, Mar 29 '22 at 21:49

score 1 · Answer 1 · answered May 12 '22 at 06:51

You can try following solution if you want to

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0, user-scalable=yes">
    </head>
  <body>
<!-- 1. The <iframe> (video player) will replace this <div> tag. -->
<div id="player"></div>

<script>
  // 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);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      width: '100%',
      videoId: 'osz5tVY97dQ',
      playerVars: { 'autoplay': 1, 'playsinline': 1 },
      events: {
        'onReady': onPlayerReady
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
     event.target.mute();
    event.target.playVideo();
  }
</script>
  </body>
</html>

You can check more details here

Youtube Iframe Embed won't autoplay on mobile

1 Answers1