1

I'm trying to find a way to prevent an embedded YouTube iframe from automatically going to fullscreen on mobile devices? However, I would like to be able to provide the option to the user to make it fullscreen.

At the moment, when you press play, YouTube automatically sets the video to fullscreen. I have something like the following:

self.player = new YT.Player('player', {
                            height: '100%',
                            width: '100%',
                            events: {
                                'onReady': onPlayerReady,
                                'onStateChange': onPlayerStateChange,
                                'onError': onPlayerError
                            }
                        });

I've checked the docs, and I can't find anything apart from fully disabling fullscreen.

halfer
  • 19,824
  • 17
  • 99
  • 186
David
  • 16,246
  • 34
  • 103
  • 162

1 Answers1

2

You have to set playsinline var to 1 to allow playback outside of fullscreen. This however only applies to iOS. On Android devices it doesn't matter. It plays inline by default.

 var player;

 function onYouTubeIframeAPIReady() {
    player = new YT.Player("player", {
       width: "100%"
       height: "100%",
       playerVars: {
         playsinline: 1
       },
       events: {
         onReady: (evt) => {
           // To-Do
         },
         onStateChange: (evt) => {
           // To-Do
         },
         onError: (evt) => {
           // To-Do
         }
       }
    });
  }

Also mind that you wait until the iframe api called its onYoutubeAPIReady function before creating a YouTube Player.

Leo
  • 36
  • 1
  • Surprisingly, this is also enabling autoplay on mobile. Which according to the google doc is deactivate to prevent unsolicited downloads over cellular networks. (https://stackoverflow.com/questions/48399390/youtube-embed-autoplay-on-mobile/48442630) – Julie Rankata Oct 31 '20 at 01:49