angular-youtube-mb

WebJar for angular-youtube-mb

License

License

MIT
Categories

Categories

Angular User Interface Web Frameworks
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

angular-youtube-mb
Last Version

Last Version

1.3.1
Release Date

Release Date

Type

Type

jar
Description

Description

angular-youtube-mb
WebJar for angular-youtube-mb
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/brandly/angular-youtube-embed

Download angular-youtube-mb

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bower/angular-youtube-mb/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular-youtube-mb</artifactId>
    <version>1.3.1</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/angular-youtube-mb/
implementation 'org.webjars.bower:angular-youtube-mb:1.3.1'
// https://jarcasting.com/artifacts/org.webjars.bower/angular-youtube-mb/
implementation ("org.webjars.bower:angular-youtube-mb:1.3.1")
'org.webjars.bower:angular-youtube-mb:jar:1.3.1'
<dependency org="org.webjars.bower" name="angular-youtube-mb" rev="1.3.1">
  <artifact name="angular-youtube-mb" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='angular-youtube-mb', version='1.3.1')
)
libraryDependencies += "org.webjars.bower" % "angular-youtube-mb" % "1.3.1"
[org.webjars.bower/angular-youtube-mb "1.3.1"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

Angular 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.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
$ 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

Versions

Version
1.3.1
1.1.1
1.1.0
1.0.2