Googleapi youtube playlist url not loading in ionic 1

ionic-v1
1

I am trying to load a youtube playlist in my Ionic 1 app and play it. When I try to load the videos from googleapis.com by HTTP get method, I’m getting error ionic://localhost is not allowed by Access-Control-Allow-Origin.

image
image.png1011×211 59.4 KB

Below is my

app.js

$sceDelegateProvider.resourceUrlWhitelist(['self', new RegExp('^(http[s]?):\/\/(w{3}.)?youtube\.com/.+$')]);
$sceDelegateProvider.resourceUrlWhitelist(['self', new RegExp('^(http[s]?):\/\/(w{3}.)?googleapis\.com/.+$')]);

controller.js

$scope.trustSrc = function(src) {
		return $sce.trustAsResourceUrl(src);
	}

$scope.videos = [];

		$scope.youtubeParams = {
			key: 123',
			maxResults: '50',
			part:'snippet',
			order:'date',
			autoplay:'1',
			playlistId:'abcd'			
		}

		$http.get('https://www.googleapis.com/youtube/v3/playlistItems', {params:$scope.youtubeParams}).success(function(response){
			angular.forEach(response.items, function(child){
				$scope.videos.push(child);
			});
		});

$scope.getvideo_id = function(videoId) {
		$scope.videoId = videoId;
		$state.go('play',{url:$scope.videoId});
	};

$scope.view_vid= function () {		
		$scope.youtube_videoid = $ionicHistory.currentView().stateParams.url;
		$scope.iframe_link = 'https://www.youtube.com/embed/' +$scope.youtube_videoid +'?autoplay=1;rel=0;enablejsapi=1;showinfo=0';
		
	};

My HTML code - playlist screen

 <ion-content lazy-scroll has-bouncing="true">
<div class="video_card padding" ng-repeat="video in videos" ng-click="getvideo_id(video.snippet.resourceId.videoId);">
            <div class="item item-image">
                <img class="horizontal" image-lazy-src="{{video.snippet.thumbnails.medium.url}}" image-lazy-loader="ios" image-lazy-distance-from-bottom-to-load="-200">
                <img class="play_btn" src="img/play_btn.png" >
            </div>
            <div class="item item-text-wrap">
                <h2>{{video.snippet.title}}</h2>
            </div>
        </div>
</ion-content>

video detail HTML

<ion-view style="background:#F4F1F1;" view-title = "Videos" ng-init="view_vid();">
	<ion-content class="padding" has-bouncing="true">
        <iframe id ="video_test" class="video_frame" ng-src="{{trustSrc(iframe_link)}}" frameborder="0" allowfullscreen></iframe>
    </ion-content>
</ion-view>

config.xml

<allow-navigation href="*" />
<allow-navigation href="*://*.youtube.com/*" />
<preference name="AllowInlineMediaPlayback" value="true" />

Please, someone, guide me what else I need to do. I’ve been stuck in this issue past few days. Its mainly not working in the iOS device, working fine in Android device.