YouTube Iframe API: Not autoplaying on IOS

Question

I'm using the YouTube iFrame API to embed a video that plays as soon as it's loaded. The video automatically loads everywhere but mobile IOS. How can I get it to auto play? I added the event.target.mute() code based on a comment from another thread, but no luck. You can ignore the code in the interval - that's just to help the video loop with a fading effect.

Iframe API code:

  <div id="player" class="hero__vid"></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', {
          height: '390',
          width: '640',
          videoId: MyVidID,
          playerVars: {
            controls: 0,
            showinfo:0,
            rel:0,
          },
          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();

        var interval_is_stopped = false;
        setInterval(function (){
          var current_time = event.target.getCurrentTime();

          if (current_time > 14.9 && !interval_is_stopped) {
            interval_is_stopped = true;
            jQuery('#player').fadeTo(400, 0.7, function(){
              player.seekTo(0);
              jQuery(this).fadeTo(400, 1, function(){
                interval_is_stopped = false;
              });
            });
          }
        }, 10);

      }

    </script>

score 1 · Answer 1 · answered Feb 08 '18 at 01:22

1

This is an iOS restriction. Please see here https://stackoverflow.com/a/8142187/2840591

Or here

https://stackoverflow.com/a/3056220/2840591

answered Feb 08 '18 at 01:22

Brian McCall

1,831
1
18
33

How are they getting it to work on this site? https://iamgia.com/ It works on IOS somehow??? – Jordan Carter Feb 08 '18 at 01:33
View the second link – Brian McCall Feb 08 '18 at 01:43
Thank you, but I don't think that works. The author of that post said it doesn't work anymore. – Jordan Carter Feb 08 '18 at 02:08
I found out how to do this. Please see my answer. It can be done with the HTML5 video tag, but not the iframe. – Jordan Carter Feb 08 '18 at 21:26

score 1 · Answer 2 · answered Feb 08 '18 at 21:26

I found out how to do this, Thanks to this answer. IOS 10+ actually natively allows this to happen now, but unfortunately it's only for the HTML5 video tag, so YouTube's iframe won't work, which is a real shame!!

Here's the code I used

<video playsinline preload="auto" loop muted autoplay>
  <source src="vid.mp4'" type="video/mp4">
  Sadly, your browser does not support the video tag X_x
  </video>

Hashaam Siddiq · Answer 3 · 2020-09-02T09:57:26.803

Use this if you are developing an iOS application.

For the youtube player to auto play, you need to initialize your WKWebView with following configuration

let config = WKWebViewConfiguration()
config.allowsInlineMediaPlayback = true

// this will not require any gesture for triggering playback
config.mediaTypesRequiringUserActionForPlayback = []

// NOTE: WKWebView should be initialized in code as need to set it up 
// with custom configuration. 
// This is not possible through Interface Builder.
let webView = WKWebView(frame: CGRect.zero, configuration: config)

Also, make sure you have following code in your javascript code. Taken from YouTube Player API reference:


      // ...

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

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

      // ...

score 0 · Answer 4 · answered Aug 31 '20 at 01:21

0

use 'playsinline': 1 for IOS, it will work

answered Aug 31 '20 at 01:21

Aditia Dananjaya

111
1
2
10

YouTube Iframe API: Not autoplaying on IOS

4 Answers4