orizens / ngx-youtube-player Goto Github PK

I can see in the youtube-player.service there is an option for PlayerVars that is commented out. Any chance this will be included soon?

Hi,
When using it on Electron and not running it as node server, but as a build, the video will fail because the protocol is set to file instead http. I have fixed by hardcoding it from return protocol to return protocol 'http'; And it works. It would be nice to fix it, maybe something like if protocol is 'file' change it to http.

Hi.

I am using this component in my app in this way

<youtube-player *ngIf="customVideoId != null" [videoId]="customVideoId" [width]="480" [height]="360"></youtube-player>

But when customVideoId variable changes the iframe doesn't reload. The attribute [videoId] is reloaded, but iframe not.

If you give me some guideline to make a PR I can try.

Module '"../../../../../../Users/USERNAME/Desktop/youtubedata/node_modules/ngx-youtube-player/ngx-youtube-player"' has no exported member 'YoutubePlayerModule'.ts

Buttons Play/Pause are not clickable.
The issue is due to <h2> tag overlaying the buttons. See screenshot:

Hi,
Very nice component! Although, I had to run manually "npm i @types/youtube" as it did not find the typings.

I am hosting most of my projects on github using gh-pages and non-ssl requests are not permitted.
Could it be possible to the https url for the iframe_api ?
http://www.youtube.com/iframe_api => https://www.youtube.com/iframe_api

Thanks :)

I have used the ngx-youtube-player component in a variety of contexts, and I am finding that the resulting player never has the 'gear' icon which makes it possible to control parameters such as speed, subtitles, etc...

This is the same behavior as the online stackblitz demo: https://stackblitz.com/edit/ngx-youtube-player?file=src%2Fapp%2Fapp.module.ts.

I have tried to use the "playerVar" parameters to change this behavior.

For example, using the following code in my HTML file I can turn off all the controls: (as a result of 'controls: 0):

<youtube-player [videoId]="currentVideoId" [height]="playerHeight" [width]="playerWidth"
[playerVars]="{ 'controls':'0'}"
(ready)="savePlayer($event)" (change)="onStateChange($event)">

Using the following variation in my HTML file I can turn the controls back on:

<youtube-player [videoId]="currentVideoId" [height]="playerHeight" [width]="playerWidth"
[playerVars]="{ 'controls':'1'}"
(ready)="savePlayer($event)" (change)="onStateChange($event)">
</youtube-player

Based on the "player parameters" reference (https://developers.google.com/youtube/player_parameters?playerVersion=HTML5) there is no way to turn individual controls on or off.

If I open in Youtube the same video as in the stacklitz demo, then I do get the gear icon:

   https://www.youtube.com/watch?v=qDuKsiwS5xw&feature=youtu.be

If I look at the online Youtube API live demo (https://developers.google.com/youtube/youtube_player_demo), I am also finding that the "gear" icon is always present (except if you "uncheck" the "controls" parameter.

This therefore appears to be a bug with ngx-youtube-player component.

Could you please implement an option to hide the video title (showinfo: 0) ?

Many thanks!

Hi 'im using the ng2-youtube-player on a mobile app project and I want to play video without using the fullscreen mode can you help me to know what parameter should i pass for it

Hi

How can I change the video id and reload the iframe?

I am programming a angular 2 typescript webapp.

Many Thanks!

Hi,
I am implementing this in Angular2 typescript. Actually, I have facebook like web application in which lot's of youtube player are in single page. I am getting this error every time while it opens. I am using in localhost but it also appears on server (xyz.com). Please help me out?

Any help is greatly appreciated.

I'm testing this component in an Ionic 2 RC2 environment, and when I test it on a device (iOS), I get an error:

Property ytPlayerContainer is private and only accessible within class YoutubePlayer

Any ideas?

Great module, I noticed that when using this module on my pWA over HTTPS I get a mixed content warning, I changed this line in the file youtube-player-service.js:

    playerApiScript.src = "http://www.youtube.com/iframe_api";

to this:
playerApiScript.src = "//www.youtube.com/iframe_api";

It fixes the problem (youtube iframe is now loaded via https if the request source is https

Can this package be used for displaying multiple videos ??
I need a carousel of videos. Can this package be used???
if yes, then how to pass multiple video id to input [videoId] ????

hello, on Ionic 3.8 this module fails silently.
It works perfectly within the browser, with ionic serve command but cannot display anything and shows no error while executed on device.

What can we do ?

hey,
i am trying to show a few videos in one page using ngFor
but the buttons are just working for the first video i choose to play.
i tried to create an array of players but it still not working.
any idea?

I have an issue where the first time I load my app, the video don't show up at all. If i hit refresh, it shows up as normal. But if i then do a hard reset, shift+f5, its not showing up again. This in the Chrome browser, Edge seems to be working fine. I check in the code inspector when its not showing up, but the tags are there even if its not showing up. Any ideas here? Source: https://github.com/ekstremedia/angular6/blob/master/src/app/video/video/video.component.html

ASP.net Core 2.0, Angular 4, I really tried to follow all the guidelines available, but still:

An unhandled exception occurred while processing the request.

Exception: Call to Node module failed with error: Error: Template parse errors:
Can't bind to 'videoId' since it isn't a known property of 'youtube-player'.
1. If 'youtube-player' is an Angular component and it has 'videoId' input, then verify that it is part of this module.
2. If 'youtube-player' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
</section>

<youtube-player [ERROR ->][videoId]="reelId"	
(ready) = "savePlayer($event)"
(change) = "onStateChange($event"): ng:///AppModuleShared/VoiceComponent.html@15:16
'youtube-player' is not a known element:
1. If 'youtube-player' is an Angular component, then verify that it is part of this module.
2. If 'youtube-player' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</section>

Any suggestions?

voice.component.ts:

import { Component } from '@angular/core';

@Component({
	selector: 'voice',
	templateUrl: './voice.component.html'
})
export class VoiceComponent {
	reelPlayer: YT.Player;
	private reelId: string = 'uqmIR0nj9Cg';

	savePlayer(player) {
		this.reelPlayer = player;
		console.log("'sacvePLayer()' called");
	}

	onStateChange(event) {
		console.log('player state', event.data);
	}
}

voice.component.html:

<!-- ... -->
<youtube-player [videoId]="reelId"	
	(ready) = "savePlayer($event)"
	(change) = "onStateChange($event)">
</youtube-player>
<!-- ... -->

Got the following error:
ERROR in .//ng2-youtube-player/src/youtube-player.service.js
Module not found: Error: Can't resolve '@angular/platform-browser/src/facade/browser' in '/home/dwploc/aumc-test/node_modules/ng2-youtube-player/src'
@ .//ng2-youtube-player/src/youtube-player.service.js 3:16-71
@ ./~/ng2-youtube-player/ng2-youtube-player.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Failed to compile.

This is no longer facade in the src path under v4.0.0

getting this for specific video IDs . Not sure why.

This will allow for seamless installation in client project.

like in #24 making changes in package.json didn't work for me.
In chrome inspect im getting this :
Failed to load resource: net::ERR_FILE_NOT_FOUND file://www.youtube.com/iframe_api
need help..please

(Sorry for my bad english)
Hi, I'm trying to add css styles for do my video be responsive. Something like this:
HTML:

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

CSS:

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Have you ever come across this error? The element is there, but I'm seeing this error in some cases.

Error: The selector "..." did not match any elements
at DefaultDomRenderer2.selectRootElement (platform-browser.js:2791)
at BaseAnimationRenderer.selectRootElement (animations.js:502)
at DebugRenderer2.selectRootElement (core.js:14962)
at YoutubePlayerComponent.ngAfterContentInit (youtube.component.ts:49)
at callProviderLifecycles (core.js:12421)
at callElementProvidersLifecycles (core.js:12398)
at callLifecycleHooksChildrenFirst (core.js:12382)
at checkAndUpdateView (core.js:13510)
at callViewAction (core.js:13857)
at execComponentViewsAction (core.js:13789)

Hello! I've got some problems with timeupdate event for my own time progressbar ( I disabled youtube controls). I add inside onReady following code:

onReady (player) {
    this.player = player;
    this.player.addEventListener('timeupdate', this.updateProgressBar, true);
  }

and updateProgressBar method

  updateProgressBar() {
      this.progressBar.nativeElement.value = Math.floor((100 / this.player.getDuration()) * this.player.getCurrentTime());
  }

And timeupdate event doesn't fire. What am I doing wrong?

Hi

I am developping an angular 2 typescript application.
If I open browser network tools I see that remote.js is called all seconds or multiple times a second. And it does not stop!

How can I fix that?

Many thanks!

Ready function is not triggering any event

Yeah cool component! 👏

Did you think the possibility to install it via Yarn? 😛

Let me preface this by saying that I am not able to further elaborate on the issue since the device I'm trying this on is remote, but using the exactly same code for my Ionic 3 app on Android and iOS, Android works well, iOS doesn't. The video never loads. Hope someone can try to reproduce this and shed some light on what could go wrong.

Thanks!

angular version: >= 4.3.x
ng2-youtube-player version: 0.0.3

build: based on AngularStarter

[at-loader] ./node_modules/ng2-youtube-player/src/models.d.ts:1:1
    TS2688: Cannot find type definition file for 'youtube'.

[at-loader] ./node_modules/ng2-youtube-player/src/models.d.ts:5:26
    TS2503: Cannot find namespace 'YT'.

[at-loader] ./node_modules/ng2-youtube-player/src/models.d.ts:6:27
    TS2503: Cannot find namespace 'YT'.

[at-loader] ./node_modules/ng2-youtube-player/src/modules/youtube-player.component.d.ts:1:1
    TS2688: Cannot find type definition file for 'youtube'.

[at-loader] ./node_modules/ng2-youtube-player/src/modules/youtube-player.component.d.ts:16:17
    TS2503: Cannot find namespace 'YT'.

[at-loader] ./node_modules/ng2-youtube-player/src/modules/youtube-player.component.d.ts:17:25
    TS2503: Cannot find namespace 'YT'.

[at-loader] ./node_modules/ng2-youtube-player/src/modules/youtube-player.component.d.ts:18:26
    TS2503: Cannot find namespace 'YT'.

[at-loader] ./node_modules/ng2-youtube-player/src/services/youtube-player.service.d.ts:1:1
    TS2688: Cannot find type definition file for 'youtube'.

[at-loader] ./node_modules/ng2-youtube-player/src/services/youtube-player.service.d.ts:10:24
    TS2503: Cannot find namespace 'YT'.

[at-loader] ./node_modules/ng2-youtube-player/src/services/youtube-player.service.d.ts:15:110
    TS2503: Cannot find namespace 'YT'.

[at-loader] ./node_modules/ng2-youtube-player/src/services/youtube-player.service.d.ts:16:18
    TS2503: Cannot find namespace 'YT'.

[at-loader] ./node_modules/ng2-youtube-player/src/services/youtube-player.service.d.ts:17:19
    TS2503: Cannot find namespace 'YT'.

[at-loader] ./node_modules/ng2-youtube-player/src/services/youtube-player.service.d.ts:18:35
    TS2503: Cannot find namespace 'YT'.

[at-loader] ./node_modules/ng2-youtube-player/src/services/youtube-player.service.d.ts:19:23
    TS2503: Cannot find namespace 'YT'.

[at-loader] ./node_modules/ng2-youtube-player/src/services/youtube-player.service.d.ts:20:113
    TS2503: Cannot find namespace 'YT'.

[at-loader] ./node_modules/ng2-youtube-player/src/services/youtube-player.service.d.ts:21:30
    TS2503: Cannot find namespace 'YT'.

I'm using Google Chrome Version 75.0.3770.142 (Official Build) (64-bit) on a MacBook Air running OS Mojave v.10.14.5.

Video reproduction of the issue here:
https://youtu.be/QRA2JTP3VOs

Hello all,
I have this error when I put a player in a carousel (ngx-slick). This happens if I have a player in a hidden slide.
Any idea?

Thanks in advance

Can non-youtube videos also be played with this package ???

After following the tutorial steps to install and use, I got the missing type error solved in this issue #4

And now I got this error with YT.PlayerEvent.

could you help me please? (and sorry for my english)

Node version: 6.10.2
npm version: 3.10.10
Angular 4

hello,
i want to generate an alert when my video is finished. following is the code i am using for generating alert but nothing happen .

<div id="ytplayer"></div>

ngOnInit() {
    player = YouTubePlayer('ytplayer', {
      videoId: 'AEX8o59nQNM',
      playerVars: { 'autoplay': 0, 'rel': 0, 'controls': 0, 'modestbranding': 1, 'showinfo': 0 },
      events: {
            'onReady': () => {
            },
            'onStateChange': (event) => {
if(event.data == 0){
alert('video finished');
}
            }
          }
    });
  }

I am trying to disable related videos, controls, and show info for youtube player, just like in embed api where we would add on end of URL.

Is this possible ?

Is it possible to set the video to fullscreen by default?

Hi, for some reason I can call methods like playVideo() and seekTo(), but getVideoData() doesn't work on my local machine. Calling the method on the Plunker demo works fine.

I have @types/youtube installed if that's relevant.

During compile on Angular 4.0.1
service.d.ts and component.d.ts

added @types/youtube
now get -
/node_modules/ng2-youtube-player/src/youtube-player.service.d.ts (6,30): Namespace 'YT' has no exported member 'EventArgs'.

hello,
i am using this package in my angular 2 project. but i have one issue that is i want to make my video player fullscreen & exit of fullscreen on custom fullscreen button. i am not getting any idea from youtube API Doc. please give some suggestion that how can i implement this.

ionic3/angular4 - If two pages have ngx-youtube-player embedded, the first page loaded will output the ready() event (even if multiple videos). The second page loaded will not output the ready() event and no video will render.

Any hints/areas for me to investigate? TY

Hi,

I used the angular cli to create a new project and included ng2-youtube-player. But on compiling I get this error.

ERROR in [default] /.../node_modules/ng2-youtube-player/src/youtube-player.component.d.ts:1:0
Cannot find type definition file for 'youtube'.

ERROR in [default] /.../node_modules/ng2-youtube-player/src/youtube-player.component.d.ts:10:24
Cannot find namespace 'YT'.

I'm not sure how to proceed. Does anyone know a solution for this?

How to reproduce

• Insert youtube-player component into page.
• Build and serve universal, go to page

Error
window is not defined, in YoutubePlayerService (line 9)
export function win() { return window; }

Instead, you should have the classic workaround, and thus, something like
if(isPlatformBrowser(this.platformId)) { win() // whatever code }

Sorry, I can't do the pull request, but this should be easy to fix.

Thank you

I have youtube-player component implemented in my eagerly loaded HomeComponent and a lazyloaded module. if onready event fires in a eagerly loaded component it won't be able to fire in a lazy loaded module.
And vice versa if it fires in a lazy loaded module it won't be able to fire in an eagerly loaded component afterwards.

I then transformed the module to eagerly loaded and it all started working but the issue still stands.

Angular Universal seems to be having trouble with this when rendering server side, as it's accessing the DOM through ElementRef and the simply DOM isn't available.

I've worked around this by creating a dummy youtube-player component to satisfy the component's existence for Node, but really you probably should be accessing the DOM through renderer.

Hello, thanks for such a good player! is there a way to remove the more videos elements on the player when the video is pause or stop ????

1. using ng4
2. using ngc
3. support AOT
4. well tested
5. migrate to a new starter repo - https://github.com/robisim74/angular-library-starter

If you have a page that declares more than one instance of the player, each instance will append a script element node to the root document body for adding the YouTube iFrame API reference. This occurs in loadPlayerApi() each time a new player is set up.

There should only ever be one script element for the reference that gets added if it doesn't already exist.

Please advise when this could be addressed.

Heya, we have a community push to get @scarf/scarf removed from packages. It's a data protection and library expectations issue.

There's a considerable backlog of conversation on Reactiflux #news-and-links, with a reasonable starting point here: https://discordapp.com/channels/102860784329052160/105816607976095744/727600754646450206

The conversation also included the author of scarf as well.

The result being TanStack/query#676