Create A Youtube Angularjs Directive

I created the following AngularJS directive to embed youtube videos: // A Simple youtube embed directive .directive('youtube', function() { return { restrict: 'EA', scop

Solution 1:

With Angular 1.2, you need to inject $sce service and trustAsResourceURL the src of an iframe.

Demo: http://plnkr.co/edit/0N728e9SAtXg3uBvuXKF?p=preview

.directive('youtube', function($sce) {
  return {
    restrict: 'EA',
    scope: { code:'=' },
    replace: true,
    template: '<div style="height:400px;"><iframe style="overflow:hidden;height:100%;width:100%" width="100%" height="100%" src="{{url}}" frameborder="0" allowfullscreen></iframe></div>',
    link: function (scope) {
        scope.$watch('code', function (newVal) {
           if (newVal) {
               scope.url = $sce.trustAsResourceUrl("http://www.youtube.com/embed/" + newVal);
           }
        });
    }
  };
});

Also see: Migrate from 1.0 to 1.2 and related question.