How can i bind i frame youtube from json file


#1

hi every body
today i have problem in my app

i have json file that have details about youtube links
like this

 [
     {
         "Title": "1",
         "Photo": "channel1",
         "Link": "https://www.youtube.com/embed/t1-Kx9mNaBk?"
     },
     {
         "Title": "2",
         "Photo": "channel2",
         "Link": "https://www.youtube.com/embed/t1-Kx9mNaBk?"
     },
     {
         "Title": "3",
         "Photo": "channel3",
         "Link": "https://www.youtube.com/embed/t1-Kx9mNaBk?"
     },
     {
         "Title": "4",
         "Photo": "channel4",
         "Link": "https://www.youtube.com/embed/t1-Kx9mNaBk?"
     }
 ]

and this html

<ion-view view-title="Channel">
	<ion-content ng-controller="ChannelController">
		<ion-list>
            <ion-item ng-repeat="item in channel  | filter: { Title : whichchannel }"> 
                 <h2>{{item.Title}}</h2>
                <div class="video-container">
                    <iframe src="{{item.Link}}" frameborder="0" allowfullscreen></iframe>
                </div>
            </ion-item>
		</ion-list>
	</ion-content>
</ion-view>

result in app

Forbidden
You don’t have permission to access /<iframe src='https://www.youtube.com/embed/t1-Kx9mNaBk on this server.

can any body help me
Thanks


#2

any body can solve this problem


#3

Looks like you might need to whitelist youtube…

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