JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3
  • Score
    100M100P100Q40067F
  • License MIT

AngularJS directive for youtube-iframe-player-api

Package Exports

  • ng-youtube-embed-iframe

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ng-youtube-embed-iframe) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ng-youtube-embed-iframe Tests Jsdelivr

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