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's Issues

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!

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 :(

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

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.

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

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
  }

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.

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)

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.

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.

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

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

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.

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>

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.

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

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,

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

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();
}

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.

autoplay doesn't work on mobile devices

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