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?
6 Answers
Answers 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>Answers 2
It must be the fix to your problem, check this StackOverFlow Answer -
http://stackoverflow.com/a/20289540/7125023
CODEPEN CODE ;
HTML
<h1>One-click play+fullscreen via YouTube API</h1> Suggested code from this <a href="http://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)(); } } Answers 3
I use this code to force the video to open in youtube player in Android i hope it will be help you
String videoId = "VIDEO_ID_HERE"; Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("vnd.youtube:"+videoId)); intent.putExtra("VIDEO_ID", videoId); intent.putExtra("force_fullscreen",true); startActivity(intent); Answers 4
You can use YouTubeStandalonePlayer class, this class creates intents that will play YouTube videos in a standalone player activity. Intent intent = YouTubeStandalonePlayer.createVideoIntent(context, YOUR_DEVELOPER_KEY, VIDEO_ID, 0, false, false); startActivity(intent); Last parameter of intent is for lightbox mode. So if you set it to true it will play in lightbox mode not in fullscreen mode. So set it to false and it will play in fullscreen mode. Answers 5
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() { } }; } Answers 6
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/
0 comments:
Post a Comment