Dhananjay Kumar

I have often seen, developers come across requirement to embed a YouTube video in an AngularJS application. In this post, we will learn to create a simple YouTube AngularJS directive and also to use some of the popular directive from the GitHub.
We will follow step by step approach to create the YouTube custom directive. So let us start with create module and the controller.

var myApp = angular.module('myApp', []);
myApp.controller('VideoController', function ($scope) {
    $scope.video = 'zRtPUIumXcY';
});

Next we will create a custom directive with the isolated scope. Let us go ahead and create YouTube directive with following characteristics

• Directive will be used as an Element
• Directive will work in the isolated scope
• Directive replace property is set to true, such that user will not able to view the directive information in the browser
• In the template, iframe is used to play the YouTube video.
• In the link function, we are watching the object passed to directive. Whenever value of object changed, directive will play the different video from the YouTube.

By putting all above together, directive is created as shown in the listing below:

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

As you might notice in above listing that in the template, we are using the iframe to play the YouTube video. Also we are watching the value passed to the directive and constructing the URL using the $sce service of AngularJS.
On the view, angularYoutube directive can be used as shown in the listing below:

<div ng-controller="VideoController">
        <angular-youtube video="video"></angular-youtube>
    </div>

As of now, we should able to play a video in AngularJS application. Right now we are passing hard coded video code from the controller. We can allow user to pass the video code, just by using an input textbox as shown in the listing below:

<div ng-controller="VideoController">
        <input type="text" ng-model="video" placeholder="enter video code here to play"/>
        <hr/>
        <angular-youtube video="video"></angular-youtube>
    </div>

Here we have created a very simple custom AngularJS directive to embed the YouTube video in the AngularJS application.
For advanced scenarios, you may want to use Angular YouTube Embed . I find it very useful for advanced scenarios. I hope you find this post useful. Thanks for reading.