Youtube embed autoplay on mobile

Question

I use React to set iframe with youtube video on page in correct size. All works well but for mobiles doesn\'t work autoplay option.

What is interesting for page, what I

Answer 1

Google official statement "Due to this restriction, functions and parameters such as autoplay, playVideo(), loadVideoById() won't work in all mobile environments.

Reference: https://developers.google.com/youtube/iframe_api_reference

Answer 2

You will not be able to implement this, since it is intentionally disabled to all mobile devices. The reason is for the user to save cellular data. It is also cited in this post.

The reason that video autoplay doesn’t work is simple. The feature is deliberately disabled in both iOS and Android for mobile devices. The reason this is done is to save mobile users money. Such devices (especially mobile phones) often use data connections that charge by bandwidth. They have data limits and going over results in a fee.

This statement was also supported with the following SO post.

• no autoplay in iframe HTML5 player on mobile (Android Chrome and Firefox)?
• how to get embedded youtube video to autostart on iphone
• Youtube autoplay not working on mobile devices with embedded HTML5 player

Answer 3

The rules have changed so most new mobiles will now let you autoplay, but most video streaming sites like youtube and vimeo haven't enabled the functionality yet. The reason the html5 video worked but the iframe didn't is because youtube disabled it.

Answer 4

By adding the parameter playsinline: 1 I managed to make the autoplay work on android and ios.

  createYoutubePlayer() {
      this.youtubePlayer = new YT.Player('youtubePlayer', {
      videoId: 'YOURID', // YouTube Video ID
      width: 277,               // Player width (in px)
      height: 600,              // Player height (in px)
      playerVars: {
        autoplay: 1,        // Auto-play the video on load
        controls: 0,        // Show pause/play buttons in player
        showinfo: 1,        // Hide the video title
        modestbranding: 1,  // Hide the Youtube Logo
        loop: 1,            // Run the video in a loop
        fs: 0,              // Hide the full screen button
        cc_load_policy: 0, // Hide closed captions
        iv_load_policy: 3,  // Hide the Video Annotations
        autohide: 1,         // Hide video controls when playing
        playsinline: 1, //forbid fullscreen on ios
      },
      events: {
        onReady: (e) => {
          e.target.mute();
        },
        onStateChange: (e) => {this.onPlayerStateChange(e)}
      }
    });
  }

Answer 5

The reason that video autoplay doesn't work is simple. The feature is deliberately disabled in both iOS and Android for mobile devices. The reason this is done is to save mobile users money. Such devices (especially mobile phones) often use data connections that charge by bandwidth.