An angular plugin for utilising the YouTube IFrame Player API
HTML JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Angular YouTube Plugin

This plugin was inspired by an excellent article by Phil Oxrud (including one of the comments).

I have extended his example to provide complete access to all YouTube IFrame API parameters, functions and events.

To use this plugin correctly, it is highly recommended that you look at both the code, and the YouTube IFrame API pages.

For a demo of usage, see this Plunk.

Simplest Usage

The only attribute which is required is video-id.

<youtube-video video-id="LM1OL7qQib4"></youtube-video>

Other Attributes

All other parameters supported by the API can also be set.

There are many.

Here, we are setting the width, height, showInfo and start parameters.

<youtube-video video-id="LM1OL7qQib4" width="320" height="240" show-info="0" start="6"></youtube-video>

Player Functions

To call functions exposed by the API, we need access to our instance of YT.Player.

To get this object, we subscribe to the playerReady event, and capture the target property of the event parameter.

<youtube-video video-id="LM1OL7qQib4" player-ready="playerReady(event)"></youtube-video>
  // our controller
  $scope.playerReady = function(event) {
    $scope.player =;

We can then call any function defined by the API on this object. See the demo for a few examples.


There are 6 events exposed by the api. These can be subscribed to by assigning functions to their corresponding attributes.

Here, in addition to the playerReady event, we subscribe to the stateChange and playbackQualityChange events.

<youtube-video video-id="LM1OL7qQib4" player-ready="playerReady(event)" state-change="stateChange(event)" playback-quality-change="playbackQualityChange(event)"></youtube-video>
  // our controller
  $scope.stateChange = function(event) {
    $scope.$apply(function() {
      if ( === YT.PlayerState.ENDED)
        $scope.state = "ENDED";
      else if ( === YT.PlayerState.PLAYING)
        $scope.state = "PLAYING";
      else if ( === YT.PlayerState.PAUSED)
        $scope.state = "PAUSED";
      else if ( === YT.PlayerState.BUFFERING)
        $scope.state = "BUFFERING";
      else if ( === YT.PlayerState.CUED)
        $scope.state = "CUED";

  $scope.playbackQualityChange = function(event) {
    $scope.$apply(function() {
      $scope.quality =;