orizens / ngx-youtube-player Goto Github PK
View Code? Open in Web Editor NEW(ngx) A youtube component wrapped with Angular (typescript)
Home Page: https://www.npmjs.com/package/ngx-youtube-player
License: MIT License
(ngx) A youtube component wrapped with Angular (typescript)
Home Page: https://www.npmjs.com/package/ngx-youtube-player
License: MIT License
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
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, 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 ????
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 ?
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 :)
Is it possible to set the video to fullscreen by default?
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.
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'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?
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.
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
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?
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!
Module '"../../../../../../Users/USERNAME/Desktop/youtubedata/node_modules/ngx-youtube-player/ngx-youtube-player"' has no exported member 'YoutubePlayerModule'.ts
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?
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
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'.
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
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
Got the following error:
ERROR in .//ng2-youtube-player/src/youtube-player.service.js/ng2-youtube-player/src/youtube-player.service.js 3:16-71
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/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
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
Could you please implement an option to hide the video title (showinfo: 0) ?
Many thanks!
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.
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.
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.
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?
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.
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 ?
How to reproduce
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
This will allow for seamless installation in client project.
getting this for specific video IDs . Not sure why.
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>
<!-- ... -->
Yeah cool component! ๐
Did you think the possibility to install it via Yarn? ๐
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
Ready function is not triggering any event
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.
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?
(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%;
}
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.
Hi
How can I change the video id and reload the iframe?
I am programming a angular 2 typescript webapp.
Many Thanks!
Can non-youtube videos also be played with this package ???
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] ????
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!
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
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
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.
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'.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.