Can YouTube be forced to play fullscreen by default on Android?

Question

The behaviour between YouTube embedded videos and Vimeo embedded videos appears to differ both from each other and across iOS/Android platforms.

I'm displaying the videos within a lightbox provided by a wordpress plugin. The videos are embedded via an iframe which has the allowfullscreen attribute.

On an iPhone (using Chrome browser), when the user presses play on either YouTube or Vimeo video, it automatically enters full screen mode.

On an android phone (Samsung Galaxy S6, using Chrome browser), when the user presses play on Vimeo it also automatically enters full screen mode. When the android user presses play on the YouTube video it remains within the lightbox and shows some controls underneath with the option to enter full screen mode.

Here's some screen captures:

Vimeo
In the lightbox, before pressing play

After pressing play Vimeo goes to full screen automatically

YouTube
YouTube video in the lightbox

After pressing play YouTube does not go full screen automatically (but it does on the iPhone)

Question
Is there a way to make YouTube behave like Vimeo across all devices?

Answer 1

change your code with reference to this:

$(function(){
  $('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });

  $(window).resize(function(){
    $('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="video" src="//www.youtube.com/embed/5iiPC-VGFLU" frameborder="0" allowfullscreen></iframe>

Answer 2

It must be the fix to your problem, check this StackOverFlow Answer -

https://stackoverflow.com/a/20289540/7125023

CODEPEN CODE ;

HTML

<h1>One-click play+fullscreen via YouTube API</h1>
Suggested code from this <a href="https://stackoverflow.com/a/20289540/288906">StackOverflow answer</a>

<h2>Instructions</h2>
<ol>
  <li>Click on [play fullscreen]</li>
  <li>Click on the fullscreen button in youtube's player to exit fullscreen</li>
</ol>

<script src="https://www.youtube.com/iframe_api"></script>
<button>play fullscreen</button><br>
<div id="player"></div>

## Safari 8

It works perfectly:

0. Enters fullscreen
0. Exits fullscreen

## Firefox 35

Buggy, annoying but working:

0. Enters fullscreen (on Codepen.io)
0. Enters fullscreen (YouTube.com)
0. Third click: Exits fullscreen

## Chrome 40

Buggy, broken:

0. Enters fullscreen (on Codepen.io)
0. Does nothing
0. Third click: Exits fullscreen but the video fills the iframe, effectively breaking the site. <a href="http://i.imgur.com/CHibfEN.png" target="_blank">Screenshot</a>


## Mobile browsers

This is the default behavior on iPhone, but it cannot work anywhere else (Android, iPad) since 

* to `play()` a video or to `requestFullScreen()` you need a user tap **in the same document** (read: not across the iframe)

This means that

* you can't call `requestFullScreen()` when the video emits the event `onplay`
* you can't trigger `play()` via YouTube API (it would cross the frame) **and** call `requestFullScreen()` in the same tap

So with one tap **either** you play the video **or** get it fullscreen; you'll always need two separate taps if you use YouTube.

CSS

html {
  padding: 1em;
}
button {
  width: 200px;
  height: 100px;
  margin-bottom: 1em;
}

MAIN JAVASCRIPT

var player, iframe;
var $ = document.querySelector.bind(document);

// init player
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '200',
    width: '300',
    videoId: 'dQw4w9WgXcQ',
    events: {
      'onReady': onPlayerReady
    }
  });
}

// when ready, wait for clicks
function onPlayerReady(event) {
  var player = event.target;
  iframe = $('#player');
  setupListener(); 
}

function setupListener (){
$('button').addEventListener('click', playFullscreen);
}

function playFullscreen (){
  player.playVideo();//won't work on mobile

  var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
  if (requestFullScreen) {
    requestFullScreen.bind(iframe)();
  }
}

Answer 3

In Android you may use Youtubeapi and check the fullscreen video default but yes there is the fullscreen button on the bottom.

take webview in layout xml

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:orientation="vertical" >
                 <com.google.android.youtube.player.YouTubePlayerView
                      android:id="@+id/youtube_view"
                      android:layout_width="match_parent"
                      android:layout_height="match_parent" />
    </RelativeLayout>

In code section use below code

public class YouTubeVideoPlayer extends YouTubeBaseActivity implements YouTubePlayer.OnInitializedListener {
    public static final String API_KEY = "<creae key from dev consol";


    public static final String VIDEO_ID = "<your youtube video id";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        /** attaching layout xml **/
        setContentView(R.layout.activity_youtube_webview);

        /** Initializing YouTube player view **/
        YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById(R.id.youtube_view);
        youTubePlayerView.initialize(API_KEY, this);
    }

    @Override
    public void onInitializationFailure(YouTubePlayer.Provider provider, YouTubeInitializationResult result) {
        Toast.makeText(this, "Failured to Initialize!", Toast.LENGTH_LONG).show();
    }

    @Override
    public void onInitializationSuccess(YouTubePlayer.Provider provider, YouTubePlayer player, boolean wasRestored) {
        /** add listeners to YouTubePlayer instance **/
        player.setPlayerStateChangeListener(playerStateChangeListener);
        player.setPlaybackEventListener(playbackEventListener);

        /** Start buffering **/
        if (!wasRestored) {
            player.cueVideo(VIDEO_ID);
        }
    }

    private YouTubePlayer.PlaybackEventListener playbackEventListener = new YouTubePlayer.PlaybackEventListener() {

        @Override
        public void onBuffering(boolean arg0) {
        }

        @Override
        public void onPaused() {
        }

        @Override
        public void onPlaying() {
        }

        @Override
        public void onSeekTo(int arg0) {
        }

        @Override
        public void onStopped() {
        }

    };

    private YouTubePlayer.PlayerStateChangeListener playerStateChangeListener = new YouTubePlayer.PlayerStateChangeListener() {

        @Override
        public void onAdStarted() {
        }

        @Override
        public void onError(YouTubePlayer.ErrorReason arg0) {
        }

        @Override
        public void onLoaded(String arg0) {
        }

        @Override
        public void onLoading() {
        }

        @Override
        public void onVideoEnded() {
        }

        @Override
        public void onVideoStarted() {
        }
    };

}

Answer 4

I developed same from this ref. Please check this reference. This will help you.

http://createdineden.com/blog/post/android-tutorial-how-to-integrate-youtube-videos-into-your-app/

For frame less video , check this one:

http://www.androidhive.info/2014/12/how-to-play-youtube-video-in-android-app/