CODEWITHSUNDEEP
angularjs
NoviceDev
NoviceDev

Reputation: 23

ng-src not working for youtube embed video

I have a small issue with youtube embed code:

<iframe ng-src="{{ emedUrl }}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

In my controller, $scope.emedUrl = "https://www.youtube.com/embed/<videId>";

Embed code is not working.

Upvotes: 1

Views: 1706

Answers (3)

Mohsen
Mohsen

Reputation: 307

I hope it fix your problem:

angular.module('myApp')
  .filter('trustUrl', function ($sce) {
    return function(url) {
    return $sce.trustAsResourceUrl(url);
   };
});

And then in your frame:

<iframe ng-src="{{ emedUrl | trustUrl }}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Upvotes: 2

Pavan Sikarwar
Pavan Sikarwar

Reputation: 798

To allow third party url use $sce.trustAsResourceUrl() 

<!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <body>

    <div ng-app="myApp" ng-controller="myCtrl">
    <iframe ng-app="myApp" ng-controller="myCtrl" ng-src="{{emedUrl}}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    {{emedUrl}}
    </div>



    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $sce) {
        $scope.emedUrl = $sce.trustAsResourceUrl("https://www.youtube.com/embed/nhvxtxBBJVc");
    });
    </script>

    </body>
    </html>

Upvotes: 0

NoviceDev
NoviceDev

Reputation: 23

I changed code like this in my controller as said by @ Mohsen

$scope.embedUrl = $sce.trustAsResourceUrl('https://www.youtube.com/embed/'+videoId);

Upvotes: 0

Related Questions