# Ionic and Angular show video problem

**URL:** <https://forum.ionicframework.com/t/ionic-and-angular-show-video-problem/15384>\
**Category:** ionic-v1\
**Created:** [January 9, 2015, 11:33am UTC](https://forum.ionicframework.com/t/ionic-and-angular-show-video-problem/15384 "2015-01-09T11:33:14Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Endiss](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/endiss/32/7786_2.png) [@Endiss](https://forum.ionicframework.com/u/Endiss)\
**Post date:** [January 9, 2015, 11:33am UTC](https://forum.ionicframework.com/t/ionic-and-angular-show-video-problem/15384/1 "2015-01-09T11:33:14Z")

</div>

Hello i’m trying to embeme a video from vimeo and got this error in console how i can unblock this to work and show video?

Error: [$interpolate:interr] Can’t interpolate: {{VideoID}}  
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. URL: [//player.vimeo.com/video/82125785](https://player.vimeo.com/video/82125785)

---

<div class="post-metadata">

**Author:** ![ItamarCohen](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/itamarcohen/32/115653_2.png) [@ItamarCohen](https://forum.ionicframework.com/u/ItamarCohen)\
**Post date:** [January 9, 2015, 12:42pm UTC](https://forum.ionicframework.com/t/ionic-and-angular-show-video-problem/15384/2 "2015-01-09T12:42:46Z")

</div>

> [@Endiss](#):
>
> $sceDelegate

hi,

You can use $sce.getTrustedResourceUrl() to trust the URL…

```
var myApp = angular.module('myApp', ['ngSanitize']);

myApp.controller('myController', [$scope, $sce, function ($scope, $sce) {
    $scope.videos = $sce.getTrustedResourceUrl('http://player.vimeo.com/video/xxxxx');
}]);

```

You can optionally configure $sceDelegateProvider to white list the URLs.

> **[AngularJS](https://docs.angularjs.org/api/ng/service/$sce#getTrustedResourceUrl)**
>
> AngularJS is what HTML would have been, had it been designed for building web-apps.
> Declarative templates with data-binding, MVC, dependency injection and great
> testability story all implemented with pure client-side...

---

<div class="post-metadata">

**Author:** ![Endiss](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/endiss/32/7786_2.png) [@Endiss](https://forum.ionicframework.com/u/Endiss)\
**Post date:** [January 9, 2015, 12:50pm UTC](https://forum.ionicframework.com/t/ionic-and-angular-show-video-problem/15384/3 "2015-01-09T12:50:20Z")

</div>

```
app.controller('videoCntr',function($state,$scope,$sce,$stateParams){
$scope.GoBack = function(){
	$state.go('mainMenu');
}
$scope.VideoID = $sce.getTrustedResourceUrl(app.CurrentModule.VideoURL);
$scope.CourseName = app.CurrentModule.Title;

```

});

Still getting error:  
“Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. URL: [//player.vimeo.com/video/82125785](https://player.vimeo.com/video/82125785)”

---

<div class="post-metadata">

**Author:** ![ItamarCohen](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/itamarcohen/32/115653_2.png) [@ItamarCohen](https://forum.ionicframework.com/u/ItamarCohen)\
**Post date:** [January 9, 2015, 1:00pm UTC](https://forum.ionicframework.com/t/ionic-and-angular-show-video-problem/15384/4 "2015-01-09T13:00:15Z")

</div>

what is your html code?

---

<div class="post-metadata">

**Author:** ![Endiss](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/endiss/32/7786_2.png) [@Endiss](https://forum.ionicframework.com/u/Endiss)\
**Post date:** [January 9, 2015, 1:00pm UTC](https://forum.ionicframework.com/t/ionic-and-angular-show-video-problem/15384/5 "2015-01-09T13:00:48Z")

</div>

```
    <script id="course.html" type="text/ng-template" >
<div ng-controller="videoCntr">
  <div class="bar bar-header">
    <button class="button icon ion-arrow-return-left" ng-click="GoBack()"></button>
    <h1 class="title">{{CourseName}}</h1>
  </div>
  <div id="video" class="row">
    <div class="col">
      <iframe ng-src="{{VideoID}}" height="100%" width="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
  </div>
  <div class="row">
    <div class="col-50">
      fss
    </div>
    <div class="col-50">
      fsdfsd
    </div>
  </div>
  
</div>
</script>
```

---

<div class="post-metadata">

**Author:** ![ItamarCohen](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/itamarcohen/32/115653_2.png) [@ItamarCohen](https://forum.ionicframework.com/u/ItamarCohen)\
**Post date:** [January 9, 2015, 1:18pm UTC](https://forum.ionicframework.com/t/ionic-and-angular-show-video-problem/15384/6 "2015-01-09T13:18:40Z")

</div>

> [@Endiss](#):
>
> $scope.VideoID = $sce.getTrustedResourceUrl(app.CurrentModule.VideoURL);

write this in the controller tell me if its ok ?  
$scope.VideoID = $sce.trustAsResourceUrl(“[Concurrence Catalyst Version 3.1 Overview Part One on Vimeo](http://player.vimeo.com/video/82125785)”);

and u can use this in the config of your app for all videos from vimeo  
$sceDelegateProvider.resourceUrlWhitelist([  
‘self’,  
‘[http://player.vimeo.com/video/](http://player.vimeo.com/video/)\*\*’  
]);

---

<div class="post-metadata">

**Author:** ![Endiss](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/endiss/32/7786_2.png) [@Endiss](https://forum.ionicframework.com/u/Endiss)\
**Post date:** [January 9, 2015, 1:32pm UTC](https://forum.ionicframework.com/t/ionic-and-angular-show-video-problem/15384/7 "2015-01-09T13:32:36Z")

</div>

Thanks it worked 🙂 I’ll later try the delegateprovider to configure;)

---

<div class="post-metadata">

**Author:** ![vashy](https://avatars.discourse-cdn.com/v4/letter/v/9de0a6/32.png) [@vashy](https://forum.ionicframework.com/u/vashy)\
**Post date:** [March 18, 2016, 12:17pm UTC](https://forum.ionicframework.com/t/ionic-and-angular-show-video-problem/15384/8 "2016-03-18T12:17:03Z")

</div>

i need help im new in ionic i cant get the video to show up…

.controller(‘PlaylistCtrl’, function($scope, $stateParams) {  
$scope.playlistSet = [  
[  
{ track: ‘Ignorance’, artist: ‘Paramore’, video:‘[www.youtube.com/watch?v=OH9A6tn\_P6g](http://www.youtube.com/watch?v=OH9A6tn_P6g)’},

```
],
[
  { track: 'How do you love me now ', artist: 'Hey Monday', video: 'www.youtube.com/watch?v=qzBruRwBltE'},
 
],
[
  { track: 'i write sins not tragedies', artist: 'panic at the disco', video: 'www.youtube.com/watch?v=vc6vs-l5dkc'},
],
[
  { track: 'shameless', artist: 'All Time Low', video: 'www.youtube.com/watch?v=VicpLNKQlJY'},
],
[ 
  { track: 'what do you mean', artist: 'Sam Tsui', video:'www.youtube.com/watch?v=R0n8c4z3lWk'},
]];

```

$[scope.id](http://scope.id) = $stateParams.playlistId;  
});

---

<div class="post-metadata">

**Author:** ![ItamarCohen](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/itamarcohen/32/115653_2.png) [@ItamarCohen](https://forum.ionicframework.com/u/ItamarCohen)\
**Post date:** [March 18, 2016, 12:34pm UTC](https://forum.ionicframework.com/t/ionic-and-angular-show-video-problem/15384/9 "2016-03-18T12:34:21Z")

</div>

hi,

add this in the config block of your app

$sceDelegateProvider.resourceUrlWhitelist([  
‘self’,  
’\*://www.youtube.com/\*\*’  
]);

---

<div class="post-metadata">

**Author:** ![Arumuganainar](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/arumuganainar/32/109422_2.png) [@Arumuganainar](https://forum.ionicframework.com/u/Arumuganainar)\
**Post date:** [September 8, 2017, 10:55am UTC](https://forum.ionicframework.com/t/ionic-and-angular-show-video-problem/15384/10 "2017-09-08T10:55:04Z")

</div>

Hello  
In my project im using iFrame to play videos using vimeo video url. When i scroll to that iframe section in the app , it asks to open that video in browser in phone with alert. Like this

“Complete action using Google chrome, Opera mini”

I dont want this. I want to block this alert.  
Error popup url : [player.vimeo.com/cometchat-dev/{"event":"ready"}](http://player.vimeo.com/cometchat-dev/%7B%22event%22:%22ready%22%7D)  
How can i fix?

---

<div class="post-metadata">

**Author:** ![Arumuganainar](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/arumuganainar/32/109422_2.png) [@Arumuganainar](https://forum.ionicframework.com/u/Arumuganainar)\
**Post date:** [September 8, 2017, 11:14am UTC](https://forum.ionicframework.com/t/ionic-and-angular-show-video-problem/15384/11 "2017-09-08T11:14:23Z")

</div>

```
          <iframe ng-src="{{videoUrl}}" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>      

```

$scope.videoUrl = $sce.trustAsResourceUrl(url + “?autoplay=1”);  
$sceDelegateProvider.resourceUrlWhitelist([  
‘self’,  
‘[http://player.vimeo.com/video/\*\*](http://player.vimeo.com/video/**)’  
]);