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

iametza/angular-youtube-embed