How to embed Youtube video in Cordova Android app

Question

I am new to Cordova App development.

I have a Youtube URL and I want to embed the video in Cordova app. I have tried making it with YouTube Api(JS Library) and with iframe also. What do I have to do to make the video load on the Android app?

Answer 1

Adding the parameter feature=player_embedded to the iframe url worked fine for me:

<iframe width="640" height="360" src="http://www.youtube.com/embed/*********?feature=player_embedded" frameborder="0" allowfullscreen></iframe>

Answer 2

Unless you are using <access origin="*" /> (not recommended) you will need to allow the following domains with your config.xml to embed youtube videos in an cordova android app:

<access origin="https://*.youtube-nocookie.com" />
<access origin="https://*.youtube.com" />
<access origin="https://*.ytimg.com" />
<access origin="https://*.gstatic.com" />
<access origin="https://*.googlevideo.com" />
<access origin="https://*.google.com" />

This is for use with the privacy-enhanced embed mode. The youtube-nocookie domain presumably is not needed for a standard embed.

If you use a content security meta tag you will also need to allow those domains in your csp.

Answer 3

Using iframe is the preferred and suggested way to embed youtube videos, so this is how you need to proceed. The getting started code from the YoutTube iframe API reference loads and works in both iOS (tested on iOS 7) and Android (tested on Android 4.3).

Answer 4

For me, the solution was editing config.xml file adding the following lines:

<preference name="AllowInlineMediaPlayback" value="true" />
<preference name="MediaPlaybackRequiresUserAction" value="false" />   
<allow-navigation href="*youtube*" />
<allow-navigation href="*ytimg*" />
<allow-navigation href="*youtube-nocookie*" />