Angular YouTube Embed

Embed a YouTube player with a simple directive.

$ bower install --save angular-youtube-mb

Can I use it?

Sure! Let me show you.

<!-- Include the file -->
<script src="angular-youtube-embed.js"></script>

// Create your app with 'youtube-embed' dependency
var myApp = angular.module('myApp', ['youtube-embed']);

// Inside your controller...
myApp.controller('MyCtrl', function ($scope) {
  // have a video id
  $scope.theBestVideo = 'sMKoNBRZM1M';
});

<!-- Use 'youtube-video' as an element or attribute. -->
<!-- Must have an ID -->
<youtube-video id="best-vid" video-id="theBestVideo"></youtube-video>

It's that simple. See it in action.

But I only have a URL.

No problem.

$scope.anotherGoodOne = 'https://www.youtube.com/watch?v=18-xvIjH8T4';

<youtube-video id="good-vid" video-url="anotherGoodOne"></youtube-video>

Is that it?

Not quite!

Events and Player Controls

• youtube.player.ready
• youtube.player.ended
• youtube.player.playing
• youtube.player.paused
• youtube.player.buffering
• youtube.player.queued

Events allow you to keep an eye on the state of things from your controller. For example, if you wanted to a watch a video over and over again forever

myApp.controller('MyCtrl', function ($scope) {
  $scope.looper = 'VvTvtIeXJ1I';

  $scope.$on('youtube.player.ended', function ($event, player) {
    // play it again
    player.playVideo();
  });
});

A full list of player methods can be found here.

Utilities

These might be handy.

• youtubeEmbedUtils.getIdFromURL
• youtubeEmbedUtils.getTimeFromURL

Just inject the service into your controller

myApp.controller('MyCtrl', function ($scope, youtubeEmbedUtils) {
  // 'VvTvtIeXJ1I'
  console.log(youtubeEmbedUtils.getIdFromURL('https://www.youtube.com/watch?v=VvTvtIeXJ1I'));
});

getIdFromURL is covered with some tests, but let me know if you find any URLs it doesn't support.

Player Parameters

YouTube's embedded player can take a number of optional parameters. You can find a full list here.

For example, you could hide the player's controls and have it start automatically. Add player-vars to your embedded player.

<youtube-video id="best-vid" video-id="theBestVideo" player-vars="playerVars"></youtube-video>

And define playerVars in your controller.

$scope.playerVars = {
    controls: 0,
    autoplay: 1
};

Check out the demo and the code behind it.

Development

First, make sure you have the necessary dependencies installed locally and gulp installed globally

$ npm install
$ npm install --global gulp

To build a minfied version to dist/

$ gulp dist

To host the demo on a local server

$ gulp host

To run a couple tests

$ gulp test

And if you want to do all the aforementioned tasks

$ gulp