arunmichaeldsouza / ng-youtube-embed

AngularJS module to embed Youtube videos with support for Youtube player parameters and JavaScript API for iframe embeds. Superlight (less than 5KB) and easy to use! Supports Youtube video URLs and IDs. No 3rd party JS dependencies.

ng-youtube-embed

AngularJS module to embed Youtube videos with support for Youtube player parameters and JavaScript API for iframe embeds.

Superlight (less than 5KB) and easy to use! Supports Youtube video URLs and IDs. No 3rd party JS dependencies.

Demo on CodePen

Available on jsDelivr CDN (50M hits/year)

Installation

CDN

Use ng-youtube-embed directly from jsdelivr CDN

https://cdn.jsdelivr.net/npm/[email protected]/build/ng-youtube-embed.min.js

via bower

You can install the package using bower. Make sure you have bower installed, then run :

bower install ng-youtube-embed --save

via npm

npm install ng-youtube-embed --save

Or, download the latest version and include ng-youtube-embed.min.js to your project.

Usage

Add ngYoutubeEmbed as a dependency in your angular app module.

var myApp = angular.module('myApp', ['ngYoutubeEmbed']);

Add the directive with the video parameter and pass in the scope variable which contains the Youtube video URL or ID for which you want to render the iframe player.

Example -

<ng-youtube-embed video="videoURL" autoplay="true" color="white" disablekb="true" end="20"> </ng-youtube-embed>

myApp.controller('myCtrl', [
  '$scope',
  function ($scope) {
    $scope.videoURL = 'https://www.youtube.com/watch?v=OPmOXJtxxoo';
  },
]);

Where videoURL is the scope variable containing the Youtube video URL.

One single parameter to embed videos using URL or ID

Works well with Youtube video IDs too. Pass in the scope variable which contains the Youtube video ID in the same video parameter.

Example -

<ng-youtube-embed video="videoID" autoplay="true" color="white" disablekb="true" end="20"> </ng-youtube-embed>

myApp.controller('myCtrl', [
  '$scope',
  function ($scope) {
    $scope.videoID = 'OPmOXJtxxoo';
  },
]);

Where videoID is the scope variable containing the Youtube video ID.

With Browserify

Using browserify to generate a bundle for your app ? Not a problem! Just require ng-youtube-embed in your app script and generate the bundle.

require('ng-youtube-embed');

Parameters

ng-youtube-embed supports all of the available Youtube player parameters. To view the list with details, click here.

Player parameters

video {string}

This parameter specifies the scope variable containing the Youtube video URL or ID for which you want to render the iframe video player.

width {string} | Default: 500px

This parameter specifies the width of the Youtube iframe embed player. Provide a value in px or % in order to render a video player with custom width.

height {string} | Default: 350px

This parameter specifies the height of the Youtube iframe embed player. Provide a value in px or % in order to render a video player with custom height.

videoid {string}

Specifies the unique video id that is used by the Youtube JS API for referencing the iframe player instance. See Events and Player Instance for usage.

autoplay {boolean} | Default: false

This parameter specifies whether the initial video will automatically start to play when the player loads. Supported values are : true and false.

ccloadpolicy {boolean}

Setting the parameter's value to true causes closed captions to be shown by default, even if the user has turned captions off. The default behavior is based on user preference. Supported values are : true and false.

color {string} | Default: red

This parameter specifies the color that will be used in the player's video progress bar to highlight the amount of the video that the viewer has already seen. Supported values are : red and white.

Note: Setting the color parameter to white will disable the modestbranding option.

controls {boolean} | Default: true

This parameter indicates whether the video player controls are displayed. Supported values are : true and false.

disablekb {boolean} | Default: false

Setting the parameter's value to true causes the player to not respond to keyboard controls. Supported values are : true and false.

enablejsapi {boolean} | Default: false

Setting the parameter's value to true enables the player to be controlled via iframe or JavaScript player API calls. See Events and Player Instance for usage. Supported values are : true and false.

end {number}

This parameter specifies the time, measured in seconds from the start of the video, when the player should stop playing the video. If you have a playlist, then this parameter will only work for the first video. Supported value is a positive integer.

fs {boolean} | Default: true

Setting this parameter to false prevents the fullscreen button from displaying in the player. Supported values are : true and false.

hl {string}

Sets the player's interface language. The parameter value is an ISO 639-1 two-letter language code or a fully specified locale. For example, fr and fr-ca are both valid values.

Note: The interface language is used for tooltips in the player and also affects the default caption track. Note that Youtube might select a different caption track language for a particular user based on the user's individual language preferences and the availability of caption tracks.

ivloadpolicy {boolean} | Default: true

Setting the parameter's value to false causes video annotations to be hidden by default. Supported values are : true and false.

listtype {string}

This parameter, in conjunction with the list parameter, identifies the content that will load in the player. Valid parameter values are playlist, search, and user_uploads.

Note: If you specify values for the list and listType parameters, then you dont need to specify a video URL or ID in the the video parameter.

list {string}

This parameter, in conjunction with the listtype parameter, identifies the content that will load in the player.

If the listtype parameter value is search, then the list parameter value specifies the search query.

If the listtype parameter value is user_uploads, then the list parameter value identifies the Youtube channel whose uploaded videos will be loaded.

If the listtype parameter value is playlist, then the list parameter value specifies a Youtube playlist ID in the parameter value.

Note: If you specify values for the list and listType parameters, then you dont need to specify a video URL or ID in the the video parameter.

You need at least 400px of width for your youtube embed player in order to render the list section properly.

loop {boolean} | Default value: false

This parameter only works when used in conjunction with the playlist parameter. It specifies whether to loop the entire playlist or not. Supported values are : true and false.

Note: To loop a single video, set the loop parameter value to true and set the playlist parameter value to the same video URL or ID already specified in the video parameter.

modestbranding {boolean} | Default: false

This parameter lets you use a Youtube player that does not show a Youtube logo. Set the parameter value to true to prevent the Youtube logo from displaying in the control bar. Supported values are : true and false.

Note: A small YouTube text label will still display in the upper-right corner of a paused video when the user's mouse pointer hovers over the player.

origin {string}

This parameter provides an extra security measure for the iframe API and is only supported for iframe embeds. If you are using the iframe API, which means you are setting the enablejsapi parameter value to true, you should always specify your domain as the origin parameter value.

playlist {string}

This parameter specifies a comma-separated list of video URLs or IDs to play.

Note: You need at least 400px of width for your youtube embed player in order to render the playlist section properly.

playsinline {boolean} | Default: false

This parameter controls whether videos play inline or fullscreen in an HTML5 player on iOS. Supported values are : true and false.

rel {boolean} | Default: true

This parameter indicates whether the player should show related videos when playback of the initial video ends. Supported values are : true and false.

showinfo {boolean} | Default: true

Setting the parameter's value to false causes the player to not display information like the video title and uploader before the video starts playing. Supported values are : true and false.

start {number}

This parameter causes the player to begin playing the video at the given number of seconds from the start of the video. If you have a playlist, then this parameter will only work for the first video. Supported value is a positive integer.

Deprecated parameters

url

ng-youtube-embed now supports Youtube video URLs as well as IDs, so the old url parameter has been deprecated in favour of the new video parameter.

autohide

See Youtube iframe player deprecation notice here.

theme

See Youtube iframe player deprecation notice here.

gaming

ng-youtube-embed now has out of the box support for gaming.youtube.com, there's no need to specify an extra parameter for that.

Events and Player Instance

The Youtube JS API fires events to notify your application of changes to the embedded player. In order to use these event parameters you need to enable the Youtube JS API using the enablejsapi option.

Check out the Youtube JS API events reference here.

onready {string}

This parameter specifies the scope variable containing the function, which gets fired when the iframe embed player is ready or has finished loading.

onstatechange {string}

This parameter specifies the scope variable containing the function, which gets fired when the state of the iframe embed player changes.

onplaybackqualitychange {string}

This parameter specifies the scope variable containing the function, which gets fired when the playback quality of the iframe embed player changes.

onplaybackratechange {string}

This parameter specifies the scope variable containing the function, which gets fired when the playback rate of the iframe embed player changes.

onerror {string}

This parameter specifies the scope variable containing the function, which gets fired when an error occurrs in the iframe embed player.

onapichange {string}

This parameter specifies the scope variable containing the function, which gets fired when the iframe embed player starts receiving API calls.

JS API events example -

The videoid parameter is required here.

<ng-youtube-embed
  video="videoID"
  videoid="myvideo"
  enablejsapi="true"
  onready="playerReady"
  onstatechange="playerStateChanged"
>
</ng-youtube-embed>

myApp.controller('myCtrl', [
  '$scope',
  function ($scope) {
    $scope.videoID = 'OPmOXJtxxoo';

    // Gets fired when the iframe player has finished loading
    $scope.playerReady = function (event) {
      console.log(event); // Event data logged
    };

    // Gets fired when the state of the iframe player changes
    $scope.playerStateChanged = function (event) {
      console.log(event); // Event data logged
    };
  },
]);

JS API player instance example -

You can get access to your iframe player instance by specifying the videoid parameter and injecting ngYoutubeEmbedService in your controller.

For more information on the iframe API and how to use it, see the iframe API documentation

<ng-youtube-embed video="videoID" videoid="myvideo" enablejsapi="true"> </ng-youtube-embed>

myApp.controller('myCtrl', [
  '$scope',
  'ngYoutubeEmbedService',
  function ($scope, ngYoutubeEmbedService) {
    $scope.videoID = 'OPmOXJtxxoo';

    $scope.playVideo = function () {
      var player = ngYoutubeEmbedService.getPlayerById('myvideo'); // Get iframe player instance
      player.playVideo(); // Play video
    };
  },
]);

ngYoutubeEmbedService

Inject the ngYoutubeEmbedService in your controller to get access to player instances and Youtube iframe API player methods.

Note: The service methods are only available once the onYouTubeIframeAPIReady event has been fired after initialising the iframe embed player.

getPlayerById( videoID )

Returns the instance of the iframe embed player, for the video ID passed to this method.

var player = ngYoutubeEmbedService.getPlayerById('myvideo'); // Returns the iframe player instance

getVideoIdByUrl( videoURL )

Returns the video ID for the Youtube video URL passed to this method.

var playerID = ngYoutubeEmbedService.getVideoIdByUrl('https://www.youtube.com/watch?v=OPmOXJtxxoo'); // Returns the video ID for the specified video URL i.e. OPmOXJtxxoo

Contributors

Arun Michael Dsouza	Fabián Horacio Veliz	Gustavo Salgado (Globant)	Nym	Lukas Drgon	atulingale009

Support

If you'd like to help support the development of the project, please consider backing me on Patreon -

License

MIT Licensed

Copyright (c) 2015 Arun Michael Dsouza ([email protected])

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

ng-youtube-embed's Issues

Uncaught ReferenceError: ytcfg is not defined

I have an ng-repeat of questions and on click it moves to the next question.

<div style="display:{{(activeQuestion === $index) ? 'block' : 'none' }}" class="row" ng-repeat="myQuestion in myQuestions">
	<div ng-if="myQuestion.video_url !== undefined">
		<ng-youtube-embed url="myQuestion.video_url"  autoplay="true" color="white" disablekb="true" end="20"></ng-youtube-embed>
	</div>
       <div class="col-sm-12" style="font-size:32px;"><strong>Question:</strong> {{myQuestion.text}    
      </div>
	<button ng-click="selectContinue()">Continue</button>
</div>
		
	</div>

Here i have a controller:

var app = angular.module('angularMainApp', ['ngRoute', 'ngYoutubeEmbed']);
app.controller('quizctrl', ['$scope', function($scope){

	$http.get('/somlink/quizdata.php').then(function(quizdata){
		$scope.myQuestions = quizdata.data;
		$scope.totalQuestions = $scope.myQuestions.length;
	});
}]);

Here is the error I am getting in my console. Though the video is loading fine and everything works, I am wondering if the error could be fixed.

Documentation on Events

Hi,

I'm using your component but lost a lot of time on making the events work.
Your documentation never mentions that supplying a videoid is mandatory before the events can work.
In your example, there is mention of video but not videoid.

Can the documentation be changed for this to avoid other people breaking their heads on this?

Thanks.

P.S.: Kudos on the component

autoplay doesn't work on mobile devices

autoplay working perfectly on desktop but not mobile devices (both Android and iOS). Any workaround?

How Can I access YTPlayer functions

Hi, i want to use your module, but i cant access YT methods, I look something about in https://developers.google.com/youtube/js_api_reference?hl=pt-br

ENABLE enablejsapi please

No audio iOS silent mode

I have noticed that on an iOS device, if the ringer is turned off the audio for an embedded video is muted. Turning off silent/turning the ringer back on (hardware toggle) and the audio works as expected.

Please provide a valid youtube video URL or ID to render the iframe embed player

Please provide a valid youtube video URL or ID to render the iframe embed player. Read documentation here - https://github.com/ArunMichaelDsouza/ng-youtube-embed

playlist parameter not accepting scope variables

<ng-youtube-embed flex="100" flex-gt-xs="70" video="movie.YouTubeVideo" playlist="movie.YouTubePlaylist"> </ng-youtube-embed>

When using the tag as shown above, the scope variable gets read as a string literal. The url generated shows this:

https://www.youtube.com/embed/dzxFdtWmjto?enablejsapi=0&autoplay=0&cc_load_policy=0&color=red&controls=1&disablekb=0&fs=1&iv_load_policy=1**&playlist=movie.YouTubePlaylist**&playsinline=0&rel=1&showinfo=1&modestbranding=0&origin=https://jrauch2.bitlampsites.com

Multiple Videos on one Page -> ngYoutubeEmbedService does not play both videos

Having an issue with multiple videos on a page, and with the ability to play the videos via the ngYoutubeEmbed service.

HTML:
<div class="col-md-12 push-20-t no-padding"> <div class="col-md-12"> <div class="block block-rounded"> <ng-youtube-embed video="aboutIfThenVideoURL" videoid="aboutIfThen" width="595px" height="300px" autoplay="false" color="red" enablejsapi="true" disablekb="true"> </ng-youtube-embed> <div class="block-content block-content clearfix"> <div class="pull-right"> <button class="btn btn-sm btn-default" ng-click="playAboutVideo()">Watch now!</button> </div> <div> <p>About IfThen: Overview</p> <p>2:22</p> </div> </div> </div> </div> <div class="col-md-12"> <div class="block block-rounded"> <ng-youtube-embed video="captainInfoVideoURL" videoid="captainInfo" width="595px" height="300px" autoplay="false" color="red" enablejsapi="true" disablekb="true"> </ng-youtube-embed> <div class="block-content block-content clearfix"> <div class="pull-right"> <button class="btn btn-sm btn-default" ng-click="playCaptainVideo()">Watch now!</button> </div> <div> <p>Captain Informational Video</p> <p>3:47</p> </div> </div> </div> </div> </div>

Here is the js:
$scope.playAboutVideo = function() {
var player = ngYoutubeEmbedService.getPlayerById('aboutIfThen');
player.playVideo(); // Play video
};
$scope.playCaptainVideo = function() {
var player1 = ngYoutubeEmbedService.getPlayerById('captainInfo');
player1.playVideo(); // Play video
};

It appears that I am able to find both videos on both button clicks, however, it seems like only one video will play no matter what I try - when I try to play the second video, I get the following error:

TypeError: player.playVideo is not a function

Can you please let me know what I'm missing here? Thanks.

IE 11 - TypeError: Object doesn't support property or method 'includes'

The gaming URL fix seems to be causing issues in IE

TypeError: Object doesn't support property or method 'includes'
at getVideoIdByUrl (http://xxx/ng-youtube-embed.js:91:13)
at Anonymous function (http://xxx/ng-youtube-embed.js:245:25)
at m.prototype.$digest (http://xxx/libs/angularjs/1.6.2/angular.min.js:145:373)
at m.prototype.$apply (http://xxx/libs/angularjs/1.6.2/angular.min.js:148:339)
at l (http://xxx/libs/angularjs/1.6.2/angular.min.js:101:87)
at t.onload (http://xxx/libs/angularjs/1.6.2/angular.min.js:106:489)

91: var ytVideoRegex = url.includes('gaming') ? YOUTUBE_VIDEO_ID_REGEX_GAMING : YOUTUBE_VIDEO_ID_REGEX,

At this point in IE
"<div class="ng-binding" ng-bind-html="youtubeEmbedFrame"></div>"
is not populated with iframe as expected ... everything still seems to work in other browsers.

Changing to:

var ytVideoRegex = (url.indexOf('gaming') !== -1) ? YOUTUBE_VIDEO_ID_REGEX_GAMING : YOUTUBE_VIDEO_ID_REGEX,

remedies the issue for me in IE 11 and still works in other browsers. Perhaps consider making this change to allow for backwards compatibility. I think that .includes() is not supported in IE until v12/MS Edge.

Uncaught TypeError: Cannot read property 'apply' of undefined

www-widgetapi.js:48 Uncaught TypeError: Cannot read property 'apply' of undefined

Gets logged every refresh and play, even worse is sometimes the events don't bind. Meaning the playerReady and playerStateChanged don't ever get called. I am unable to see a pattern, but exactly the same code refreshed seems to sometimes result in these events not getting bound. Happens like 10% of the time.

the tags are set up like this:

<ng-youtube-embed 
    video="videoID"
    videoid="videoMainStreamer" 
    enablejsapi="true"
    onready="playerReady"
    onstatechange="playerStateChanged">
</ng-youtube-embed>

The JS is this:

    $scope.videoID = 'VJawYtS_MlE';

    $scope.playerReady = function(event) {
        console.log(event); 
    };

    $scope.playerStateChanged = function(event) {
        console.log(event);
    };

Seems to be a issue of the widgetapi, however this error is avoidable if this module would set up the onYouTubePlayerAPIReady callback in a different way.

Even worse is the events not getting bound sometimes.

Angular dependency how to

More than likely a stupid question but I'm using angular and have a app.module.ts file so not sure about how to convert:
var myApp = angular.module('myApp', ['ngYoutubeEmbed']);
into... ?

I have tried:

import { ngYoutubeEmbed } from 'ng-youtube-embed';
@NgModule({
imports: [
    ngYoutubeEmbed.forRoot()
]
})
export class AppModule { }

but still getting an error:
Uncaught ReferenceError: angular is not defined
at ng-youtube-embed.min.js:7
at Object../node_modules/ng-youtube-embed/build/ng-youtube-embed.min.js (ng-youtube-embed.min.js:7)

any help will be much appreciated!

Thanks,

player.playVideo is not a function

The play button on your codepen demo doesn't work and i'm trying to do something like that :(

Exception for every event when enableapi is true

I added the directive as the followings inside the component:

                    <ng-youtube-embed
                        video='$ctrl.lesson.youtube_id'
                        videoid='$ctrl.lesson.youtube_id'
                        height='100%'
                        autoplay='true'
                        rel='false'
                        modestbranding='true'
                        enablejsapi='true'
                        onstatechange='$ctrl.onYoutubeStateChange'
                    >

The onstatechange is fired as expected and the callback is invoked accordingly.
However, one side effect is somehow the following exception is also thrown whenever there is an event, even if it is not state change related. I see the exception whenever there is an event to the player.

www-widgetapi.js:formatted:585 Uncaught TypeError: Cannot read property 'apply' of undefined
    at L.g.I (www-widgetapi.js:formatted:585)
    at X.g.l (www-widgetapi.js:formatted:1008)
    at X.g.J (www-widgetapi.js:formatted:1224)
    at Jb.W.g (www-widgetapi.js:formatted:1153)
    at f (www-widgetapi.js:formatted:864)

Using Chrome developer tool, I see the code as:

g.I = function(a, b) {
      var c = this.b[a];
      if (c) {
          for (var d = Array(arguments.length - 1), e = 1, h = arguments.length; e < h; e++)
              d[e - 1] = arguments[e];
          if (this.v)
              for (e = 0; e < c.length; e++) {
                  var f = c[e];
                  ab(this.a[f + 1], this.a[f + 2], d)
              }
          else {
              this.h++;
              try {
                  for (e = 0,
                  h = c.length; e < h; e++)
                      f = c[e],
                      this.a[f + 1].apply(this.a[f + 2], d)
              } finally {
                  if (this.h--,
                  0 < this.g.length && 0 == this.h)
                      for (; f = this.g.pop(); )
                          this.F(f)
              }
          }
          return 0 != e
      }
      return !1
  }

modestbranding won't work

Everything works except there's still a logo at the bottom:

Look on the lower righthand corner, the youtube logo is still there. Modestbranding attribute doesn't work. When I try the iframe way it works: <iframe width="560" height="315" src="https://www.youtube.com/embed/IcYdDALmyQY?modestbranding=1&autohide=1&showinfo=1&controls=1&rel=0" frameborder="0" allowfullscreen></iframe>

do not use the 'ng' prefix

It's not good practice as it can conflict with oficial AngularJS modules. You should prefixo it with something eles like your initials 'amdYoutubeEmbed' actually looks good!

strict mode error on Safari

When executing my code on Safari (Mac OS X), I get the following error:

[Error] SyntaxError: Strict mode does not allow function declarations in a lexically nested statement. (fonction anonyme) (ng-youtube-embed.js:39)

Seems there is a strict mode violation in your code that makes it crash on Safari. (For info, Chrome doesn't bother)

Support mobile urls

Current version of ng-youtube-embed doesn't play well with mobile urls as video src
For example:
'https://www.youtube.com/watch?v=E813VYySueM' => works as expected
'https://m.youtube.com/watch?v=E813VYySueM' => broken

dynamic data issue?

when by default there is no url set, browser console gives error "Please provide a valid youtube video URL or ID to render the iframe embed player. Read documentation here" whats the solution for that

also if is provide some default url so that it is rendered, when i click on other urls to change the iframe video url, why does it not auto play? its callback function for onready not working...

url: songstream.oso.nyc

much is put in console in all callbacks... i can share code if you like

here my video player

`

<ng-youtube-embed
video ="player.videoURL"
videoid="songstreamPlayer"
autoplay="player.autoplay"
controls="true"
color="white"
disablekb="false"
showinfo="false"
width="75%"
height="150px"
loop="player.loop"

    enablejsapi="true"
    onready="playerReady"
    onstatechange="playerStateChanged"
    onapichange="playerApiChange"
>
</ng-youtube-embed>

`

Stop video

Hi, i have been having issues trying to write an angular function to stop the video. i can't see any example in you documentation please you i get some help here. i'll appreciate if you provide me with an example. i tried this but nothing and i can't find any help online

$scope.stopVid = function(){
var player = ngYoutubeEmbedService.getPlayerById('myvideo');
player.stopVideo();
}

Dynamic data for VideoId is not working for stopping/playing the player from controller

Hi @ArunMichaelDsouza,

if i added dynamic scope value to videoId in the html, and access it through controller for stopping and playing the video is not working. It is so flaky, it works some times and it doesn't works sometimes and i can see console errors for player. any functions are not defined.

I changed your code pen demo with scope for videoId. it works first time when you opened the below pen and click on 'playVideo' button and then it doesn't works when you refresh the page or second time when you click on 'playVideo'. DO we need to remove any instance from the Dom, not sure what is going on?

https://codepen.io/anon/pen/gRXKwj

Angularjs2 Implementation

Can you just help me out to implement video player for youtube source in angularjs2.

Or can suggest any other plugin for the same.

Youtube Gaming support

Hey, can you support the Youtube Gaming url https://gaming.youtube.com/watch?v= instead of just the normal url https://www.youtube.com/watch?v=?

Thanks in advance.