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.theBestVideo = 'https://www.youtube.com/watch?v=sMKoNBRZM1M';

<youtube-video id="best-vid" video-url="theBestVideo"></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, let's say you want to automatically play the best video.

// Inject '$youtube' dependency
myApp.controller('MyCtrl', function ($scope, $youtube) {
  $scope.theBestVideo = 'sMKoNBRZM1M';

  $scope.$on('youtube.player.ready', function () {
    $youtube.player.playVideo();
  });
});

A full list of $youtube.player methods can be found here.

Utilities

$youtube.getIdFromURL
$youtube.getTimeFromURL

For example, you could start your video at the URL-specified time.

$scope.$on('youtube.player.ready', function () {
    var time = $youtube.getTimeFromURL($scope.videoURL);
    $youtube.player.seekTo(time, true);
    $youtube.player.playVideo();
});

Tests

I should write more of them.

$ npm install
$ bower install
$ gulp test