CODEWITHSUNDEEP
javascriptyoutube-javascript-apiyoutube-iframe-api
David
David

Reputation: 16726

How to prevent auto full screen on YouTube IFrame JavaScript API on mobile?

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.

Upvotes: 1

Views: 1101

Answers (1)

Leo
Leo

Reputation: 36

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.

Upvotes: 2

Related Questions