Reputation: 165
I am trying to build a small web app which requires playing a youtube video behind some text.
I tried using the youtube Iframe api 'playsinline' parameter, but it won't work and display videos in fullscreen on IPhones.
Any suggestions?
Thanks.
Since IOS 10 came out html5 video tag inline attribute is supported on safari and youtube videos can be played inline, and thus @David Anderton answer is marked correct.
Hope it helps
Upvotes: 10
Views: 27407
Reputation: 3194
Add playsinline=1
paramerer to the embed url. Add ?
or &
before as appropriate; ?
if the only paramerter, &
to concatenate with other params.
Example:
<iframe
src="https://www.youtube.com/v/VIDEO_ID?playsinline=1">
</iframe>
From YouTube iFrame Player API:
This parameter controls whether videos play inline or fullscreen in an HTML5 player on iOS. Valid values are: 0: This value causes fullscreen playback. This is currently the default value, though the default is subject to change. 1: This value causes inline playback for UIWebViews created with the allowsInlineMediaPlayback property set to TRUE.
Upvotes: 24
Reputation:
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 the HTML.
Upvotes: 1
Reputation: 1462
You can't play videos inline in the browser on iOS. If its a hybrid app(that is using a webview), then while instantiating the webview you can set the allowsInlineMediaPlayback and the video tag in the HTML should have the "webkit-playsinline" attribute.
Upvotes: 3