Iframe Youtube video in Cordova App on iOS not working any more

Question

My Cordova application used to be able to be able to insert Youtube Videos in to the page and play them using an iframe on iOS using the following code:

// youtube source URL
var src = 'https://www.youtube.com/embed/<VIDEOID>?autoplay=1&rel=0';

// iframe for everybody else
var element = 'iframe';

// x-ms-webview for windows app
if ( UTIL.isWindows() ) {
  element = 'x-ms-webview';
}


var $iframe = $( document.createElement( element ) );

$iframe.attr( 'id', 'streaming_video_player' );
$iframe.attr( 'width', '400' );
$iframe.attr( 'height', '300' );
$iframe.attr( 'frameborder', '0' );
$iframe.attr( 'allowfullscreen', 'allowfullscreen' );
$iframe.attr( 'src', url );

$('#video_container').html( $iframe );
				

It still works in Windows using x-ms-webview element instead of an iframe.

Sometime, I don't know when, this stopped working and it simply shows a white box where the iframe is. I inspected it in Safari and the iframe is being inserted but the iframed page from Youtube is blank.

The whitelist plugin for Cordova isn't needed anymore but I tried adding that without any luck.

I also verified that I have the following keys effecting media playback set in the plist:

OpenAllWhitelistURLsInWebView = YES
MediaPlaybackRequiresUserAction = NO
AllowInlineMediaPlayback = YES

I also put it as a preference in my config.xml like so:

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

Additionally, I tried adding additional parameters to the Youtube video URL to try and see if that would do anything:

html5=1
html5=true
A few others I saw scattered around the net

For now to fix the issue I have reverted to using the InAppBrowser plugin but I would really like to use the iframe.

Answer 1

It appears that iframes in Cordova require the allow-navigation flag to be set in the config.xml. E.g.:

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