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 YT library and this directive -->
<script src="https://www.youtube.com/iframe_api"></script>
<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. -->
<youtube-video 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 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
youtube.player.error

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.

Player Functions

Add player to embedded youtube player to reference Youtube's video player object to use player functions like playVideo(), stopVideo():

<!-- use 'player' to reference player object. -->
<youtube-video video-id="'sMKoNBRZM1M'" player="bestPlayer"></youtube-video>
<!-- perform video playback operations -->
<button ng-click="bestPlayer.playVideo()">Play</button>
<button ng-click="bestPlayer.stopVideo()">Stop</button>

Note: playVideo(), loadVideoById() won't work in all mobile environments until user initiates playback.

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 video-id="theBestVideo" player-vars="playerVars"></youtube-video>

And define playerVars in your controller.

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

Note: autoplay won't work on mobile devices.

Player Size

You can set both player-width and player-height on the element.

<youtube-video video-id="theBestVideo" player-width="'100%'" player-height="'300px'"></youtube-video>

Both values are treated as expressions, which is why the inner single-quotes are need.

Responsive Videos

You'll need to add a few classes to your markup.

<div class="embed-responsive embed-responsive-16by9">
  <youtube-video class="embed-responsive-item" video-id="theBestVideo"></youtube-video>
</div>

I took these classes from Bootstrap, so you might already have them. If not, here they are:

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}

.embed-responsive.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}

.embed-responsive-item {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

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

wezpyke/angular-youtube-embed