All geek questions in one place

Embedded YouTube video in Ionic / Cordova / PhoneGap app on iOS / iPhone

How can I get YouTube videos to play inline in the Ionic / Cordova / PhoneGap app on iPhone? I have tried all the best results here and google to no avail. Regardless of whether I embed with an iframe, object or using the YouTube iframe api, the video always opens in full screen mode.

There are many iOS apps that achieve this. How do they achieve this? And is it possible to somehow hijack and implement in the application of Cordoba? For example, through the Cordova plugin?

+1
source share
3 answers

I finally got this job.

First insert your YouTube video like this:

<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XL9528Gohe0?autohide=1&playsinline=1&showinfo=0" frameborder="0" allowfullscreen=""></iframe>

Then close Xcode and edit the config.xml file (usually in the root directory of your project).

Add this line under other settings:

 <preference name="AllowInlineMediaPlayback" value="true" />

Save it, rebuild the project, open it in Xcode and run it again. Your YouTube video should now be embedded. Tested on the latest version of iOS (9.1) on iPhone 6.

+1
source

As @Zhou Hao added in the comments, you also need

 <allow-navigation href="*://*.youtube.com/*" />

Without it, it worked fine on Android, but nothing displayed on iOS (iframe content was <html><body></body></html> ).

After adding, it worked fine on iOS as well.

This is with Cordova iOS 4.2.0.

+3
source

Usage should use playsinline as a player parameter in accordance with the documentation. Youtube API

0
source

Source: https://habr.com/ru/post/1204837/

More articles:


All Articles