Geek Answers Handbook

Display youtube video on iOS devices

I am trying to create a small web application that requires playing a YouTube video for some text.

I tried using the iframe iframe api parameter 'playinginline', but it will not work and display the video in full screen on IPhones.

Any suggestions?

Thanks.

UPDATE

Since iOS 10 came out, the inline html5 video tag attribute is supported on safari, and youtube videos can be played inline, and so @David Anderton's answer is marked correctly.

https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html#//apple_ref/doc/uid/TP40014305-CH11-DontLinkElementID_12

Hope this helps

+6
source share
3 answers

Add the playsinline=1 parameter to the playsinline=1 URL. Add ? or & , if necessary; ? if the only parameter, & , to combine with other parameters.

Example:

 <iframe src="https://www.youtube.com/v/VIDEO_ID?playsinline=1"> </iframe>

From the YouTube iFrame Player API :

This setting determines whether the videos play embedded or full-screen movies in the HTML5 player on iOS. Available Values: 0: This value causes full-screen playback. This is currently the default value, although the default value can be changed. 1: This value causes inline playback for UIWebViews created using the allowInlineMediaPlayback property equal to TRUE.

+6
source

You cannot play videos in an iOS browser. If this is a hybrid application (using a web view), then when creating an instance of the web view, you can set allowInlineMediaPlayback, and the video tag in the HTML should have the attribute "webkit-playinginline".

+3
source

First set allowsInlineMediaPlayback and mediaPlaybackRequiresUserAction to true.

Then check your iFrame HTML:

 <html><body style='margin:0px;padding:0px;'><script type='text/javascript' src='http://www.youtube.com/iframe_api'></script><script type='text/javascript'>function onYouTubeIframeAPIReady(){ytplayer=new YT.Player('playerId',{events:{onReady:onPlayerReady}})}function onPlayerReady(a){a.target.playVideo();}</script><iframe id='playerId' type='text/html' width='640' height='480' src='http://www.youtube.com/embed/5_ofy9Ae87M?enablejsapi=1&rel=0&playsinline=1&autoplay=1' frameborder='0'></body></html>

Note playsinline=1 and autoplay=1 in HTML.

+1
source

More articles:


All Articles