Working with NG-YouTube-Embed

In this blog we will learn how to work with NG-YouTube-Embed

Just thought to share one new module around YouTube from Angular. This functionality is basically for embedding any Video to your site using angular.

Here'ss the bower command to install the component on your side.

bower install ng-youtube-embed.

 

Once you installed the components successfully, you need to reference the same on index page as in the following snippet:

<script src="bower_components/ng-youtube-embed/ng-youtube-embed.js"></script>

Then you need to add the same in dependencies as in the following:

angular
  .module('yeomanApp', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'satellizer',
    'ngYoutubeEmbed'
  ])

Then put the same in controller as in the following snippet.

angular.module('yeomanApp')
  .controller('MainCtrl', function ($scope) {
    $scope.link = 'https://youtu.be/aHGmj_fqPLE';
  });

Last, but the not the least, template change

<div>
  <ng-youtube-embed
    url="link"
    width="800px"
    height="500px"
    autohide="true"
    theme="light">
  </ng-youtube-embed>
</div>

Then with the above change in place, it will produce the desired result as in the following screenshot.



Thanks for joining me