Embed YouTube video from database in an Angular app

Question

I am embedding YouTube video from database in Angular. If I use it directly without using database then it is working fine. But accessing it from database giving me below error.

Error: [$injector:unpr] http://errors.angularjs.org/1.3.2/$injector/unpr?p0=youtubeEmbedUrlFilterProvider%20%3C-%20youtubeEmbedUrlFilter

I searched on SO and found one question similar to this one. how to embed video link from database in iframe using angularjs

But while using the same answer I am not able to play YouTube video. Actually video doesn't appear and same error I am getting. YouTube video from db:

youtubevideo:"https://www.youtube.com/embed/c-z9M6KZs_0"

 <div ng-style="{'display':youtubevideo == ''?'none':'block'}">  
                                            <iframe title="YouTube video player"
class="YouTube-player" type="text/HTML" width="350" height="194"
                                                    ng-src="{{youtubevideo| youtubeEmbedUrl}}" frameborder="0" allowfullscreen></iframe></div>
                                            
                                    <!-- Youtube Video Above  -->

Below code added in script file.

 ProfileApp.filter('youtubeEmbedUrl', function ($sce) {
          return function(videoId) {
            return $sce.trustAsResourceUrl('https://www.youtube.com/embed/' + videoId);
          };
        });

What am I doing wrong?

score 1 · Accepted Answer · answered Aug 19 '17 at 03:48

console.clear();

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

app.config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'https://www.youtube.com/**'
  ]);
});

app.controller('videoController', ['$scope',
  function MyCtrl($scope) {

   $scope.youtubevideo="https://www.youtube.com/embed/c-z9M6KZs_0";

    $scope.getIframeSrc = function(src) {
      return  src;
    };
  }
]);

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script src="https://code.angularjs.org/1.2.1/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="videoController">

  <div class="thumbnail">
    <div class="video-container">
      <iframe width="100%" ng-src="{{getIframeSrc(youtubevideo)}}" frameborder="0 " allowfullscreen></iframe>
    </div>
  </div>

</body>

</html>

thanks for your answer. now i am getting below error. Uncaught DOMException: Blocked a frame with origin "https://www.youtube.com" from accessing a cross-origin frame. at :1:15 — Roxx, Aug 19 '17 at 04:01
your plnkr demo worked but if you check console log. you can see same error. Do i need to ignore this error? — Roxx, Aug 19 '17 at 04:29
yeah thats normal because you are trying to access different domain — Sajeetharan, Aug 19 '17 at 04:30

Embed YouTube video from database in an Angular app

1 Answers1