ng-youtube-embed-iframe

ng-youtube-embed-iframe lets you embed a YouTube video player on your website and control the player using AngularJs.

Using ng-youtube-embed-iframe functions, you can queue videos for playback; play, pause, or stop those videos, adjust the player volume, or retrieve information about the video being played. You can also add event listeners that will execute in response to certain player events, such as a player state change or a video playback quality change.

An AngularJS directive for Youtube Iframe API. All functions supported by Youtube Iframe API is supported.

Getting started

Installation

Installation can be done via Package managers such as npm or yarn

npm install ng-youtube-embed-iframe --save
# or
yarn add ng-youtube-embed-iframe

or use cdn

Minified

//cdn.jsdelivr.net/npm/ng-youtube-embed-iframe@latest/ng-youtube.min.js

Pretty Printed

//cdn.jsdelivr.net/npm/ng-youtube-embed-iframe@latest/ng-youtube.js

Usage

Include the modules required for ng-youtube-embed-iframe.

<script src="angular/angular.min.js"></script>
<script src="../ng-youtube.min.js"></script>

add ngYoutube dependency to the module

angular.module('myApp', ['ngYoutube']);

and in your html

<youtube id="myYoutubePlayer" video-id="{{videoId}}"></youtube>

Options

Options like video-id, height, width provided as element attribute has higher priority.

Other options can be provided in player-options

In HTML

<youtube player-options="options" id="myYoutubePlayer"></youtube>

In Controller

$scope.options = {
  videoId: '',
  height: '100%',
  width: '700px',
  playerVars: {} // all parameters supported by youtube-iframe-api
};

Refer wiki for documentation