Question

YouTube嵌入式视频与Vimeo嵌入式视频之间的行为在iOS / Android平台上显得彼此不同。

我在wordpress插件提供的灯箱内显示视频。视频通过iframe嵌入，该iframe具有allowfullscreen属性。

在iPhone（使用Chrome浏览器）上，当用户在YouTube或Vimeo视频上按下播放时，它会自动进入全屏模式。

在Android手机（三星Galaxy S6，使用Chrome浏览器）上，当用户在Vimeo上按下播放时，它也会自动进入全屏模式。当Android用户在YouTube视频上按下播放时，它仍保留在灯箱内，并在下方显示一些控件，并可选择进入全屏模式。

以下是一些屏幕截图：

Vimeo的
在灯箱中，按下播放之前

按下播放后，Vimeo会自动进入全屏状态

的YouTube
灯箱中的YouTube视频

按下播放后，YouTube不会自动全屏显示（但在iPhone上显示）

问题
有没有办法让YouTube在所有设备上都像Vimeo一样？

Answer 1

参考以下内容更改您的代码：

$(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

必须解决您的问题，请查看此StackOverFlow答案 -

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

在Android中，您可以使用Youtubeapi并检查全屏视频默认值，但是底部有全屏按钮。

在布局xml中使用webview

<?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>

在代码部分中使用以下代码

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

我从这个参考文献开发出来的。请查看此参考。这会对你有所帮助。

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

对于无帧视频，请检查以下内容：

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

YouTube上是否可以强制默认在Android上播放全屏？

4 个答案: