Inline YouTube video in Ionic/Cordova/PhoneGap app

2019-02-27 17:05发布

问题:

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?

回答1:

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.



回答2:

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.



回答3:

Use should useplaysinline as player parameter according to the documentation. youtube API