How can I get a YouTube video to play inline in an Ionic/Cordova/PhoneGap app on iPhone? I've tried all the top results on here and Google to no avail. Whether I embed with an iframe, an object, or via the YouTube iframe api, the video always opens in full screen.
There are lots of iOS apps which achieve this. How are they achieving this? And can this somehow be hijacked and implemented into a Cordova app? Via a Cordova plugin, for example?
As @Zhou Hao added in a comment, you also need
<allow-navigation href="*://*.youtube.com/*" />
Without it, it was working fine in Android, but nothing was displayed in iOS (the content of the iframe was <html><body></body></html>
).
After adding it, it worked fine on iOS also.
This is with Cordova iOS 4.2.0.
I finally got this working.
First, insert the YouTube video like so:
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XL9528Gohe0?autohide=1&playsinline=1&showinfo=0" frameborder="0" allowfullscreen=""></iframe>
Next, close down Xcode and edit config.xml (usually in the root of your project).
Add this line under the other preferences:
<preference name="AllowInlineMediaPlayback" value="true" />
Save it, rebuild the project, open in Xcode and run again. Your YouTube video should now be playing inline. Tested on latest iOS (9.1) on iPhone 6.
Use should useplaysinline
as player parameter according to the documentation. youtube API