JarCastingAngular YouTube Embed
Embed a YouTube player with a simple directive.
$ npm install --save angular-youtube-embed
or
$ 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>
What about browserify?
If you are using browserify or webpack, make sure you've installed this module:
$ npm install --save angular-youtube-embed
and use it in your code like this:
require('angular-youtube-embed');
Is that it?
Not quite!
Events and Player Controls
youtube.player.readyyoutube.player.endedyoutube.player.playingyoutube.player.pausedyoutube.player.bufferingyoutube.player.queuedyoutube.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.getIdFromURLyoutubeEmbedUtils.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
$ bower 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