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