YouTube iframe API embed origin error:


#1

I need some help figuring out the the following error when trying to embed youtube videos in an Ionic app on iOS.

[Error] Unable to post message to https://www.youtube.com. Recipient has origin file://.

I have added youtube to the resourceUrlWhitelist and load the Youtube api and video via custom directive

 $sceDelegateProvider.resourceUrlWhitelist([
        'self',
        'http://www.youtube.com/**',
        'https://www.youtube.com/**'
    ]);

directive('youtube', function($sce, $window){
return {
	restrict: "E",
	template: '<div id="player"></div>',
	link: function(scope, el, attrs) {
		// This code loads the IFrame Player API code asynchronously.
		var tag = document.createElement('script');
		tag.src = "https://www.youtube.com/player_api";
		var firstScriptTag = document.getElementsByTagName('script')[0];
		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
	 	
	 	var player;

	 	$window.onYouTubeIframeAPIReady = function() {
	 		player = new YT.Player('player', {
	 			height: '340',
	 			width: '640',
	 			videoId: 'M7lc1UVf-VE',

	 		});
	 	};
	 }
}
})

Thanks in advance.


#2

I have the same problem here. My app working fine on Android, but NOT in iOS