samirhodzic/ngx-embed-video

Get embed code for embedding youtube/vimeo/dailymotion/* video in websites from URL or ID in Angular 6+.

ngx-embed-video's Issues

Update Angular to latest stable version (4.4.4)

Also be sure that everything works fine with updated version.

Upgrading to Angular 9

I am trying to upgrade to Angular 8 but received the following warnings:

Package "ngx-embed-video" has an incompatible peer dependency to "@angular/core" (requires "^6.0.0" (extended), would install "9.0.1").
Package "ngx-embed-video" has an incompatible peer dependency to "@angular/common" (requires "^6.0.0" (extended), would install "9.0.1").

related to issue #30.

Compile trace states: "please contact the library authors"

ERROR in node_modules/ngx-embed-video/dist/index.d.ts:4:23 - error NG6005: 
EmbedVideo.forRoot returns a ModuleWithProviders type without a generic type argument. 
Please add a generic type argument to the ModuleWithProviders type. 
If this occurrence is in library code you don't control, 
  please contact the library authors.
    4     static forRoot(): ModuleWithProviders;

How to handle error in the Youtube URL

this.embedService.embed(this.exercise.YoutubeUrl, {
query: { portrait: 0, color: 'black' },
attr: { width: 800, height: 380, frameborder:1 }
}).then(res => {
this.iframeURL = res.html;
});

Error:
this.embedService.embed(...).then is not a function

How to pause a video?

Let's say we have multiple videos, so we will be showing in the bootstrap carousel and when we move to the next video, the previous video should be paused. So at this time, the video pause is required.
So how do I pause the video?

Doesn't work in IE11. Object doesn't support this action

Hello,
embed() function doesn't work in IE 11. Got 'Object doesn't support this action' error. It works in other browsers.
Could you please advise?

ERROR TypeError: Object doesn't support this action
"ERROR"
{
[functions]: ,
proto: { },
description: "Object doesn't support this action",
message: "Object doesn't support this action",
name: "TypeError",
ngDebugContext: { },
number: -2146827843,
stack: "TypeError: Object doesn't support this action
at EmbedVideoService.prototype.embed (http://localhost:4200/vendor.js:102331:9)
at PortfolioItemPageComponent.prototype.getVideoFrame (http://localhost:4200/main.js:3563:9)
at Anonymous function (http://localhost:4200/main.js:3659:21)
at PortfolioItemPageComponent.prototype.updateVideolinksToFrame (http://localhost:4200/main.js:3655:9)
at PortfolioItemPageComponent.prototype.test (http://localhost:4200/main.js:3560:9)
at Anonymous function (Function code:691:15)
at handleEvent (http://localhost:4200/vendor.js:49067:9)
at callWithDebugContext (http://localhost:4200/vendor.js:50160:9)
at debugHandleEvent (http://localhost:4200/vendor.js:49863:5)
at dispatchEvent (http://localhost:4200/vendor.js:46526:9)",
Symbol(rxSubscriber)_g.jc4utky2gqc: undefined,
Symbol(rxSubscriber)_h.jc4utky2gqc: undefined
}

Missing index.ts

versions:

node - 10.13.0
npm - 6.4.1
angular - 6.1.8
ngx-embed-video ^1.0.2

When trying to build my project which includes the ngx-embed-video I get the following error:

"ERROR in ./node_modules/ngx-embed-video/src/embed-video.service.ts
Module build failed: Error: C:_code...\node_modules\ngx-embed-video\src\embed-video.service.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv)."

This is strange as I can see it in the node_modules ...

Error on Angular 6.0.3

Hi,

I have an issue on Angular 6.0.3

ERROR in Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'EmbedVideo' was called.

There support to this version ?

Thanks!

Vimeo CORS policy blocking embed_image request.

I get this error when trying to use embed_image to get any Vimeo thumbnail: Access to XMLHttpRequest at 'https://vimeo.com/api/v2/video/76979871.json' from origin 'http://localhost:4040' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

With just this code:

this.embedService.embed_image(video, { image: 'thumbnail_medium' }).then(res => { console.log(res); });

'video' is a variable containing the video url.

This is just one of the videos I tried: https://vimeo.com/10549781

Angular 7.x support

I am using this package with angular 7.2.13.
Judging from my perspective it does seem to work.

When I do npm i I get a warning:
[email protected] requires a peer of @angular/core@^6.0.0

I am wondering why it is kept at @angular/core@^6.0.0.
Any ideas?

"WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss)."

getting this error while using it in Angular4 with innerHTML

How to implement ngx-embed-video with ngx-slick-carousel

Upgrading to Angular 8

I am trying to upgrade to Angular 8 but received the following warnings:

Package "ngx-embed-video" has an incompatible peer dependency to "@angular/common" (requires "^6.0.0" (extended), would install "8.0.0").
Package "ngx-embed-video" has an incompatible peer dependency to "@angular/core" (requires "^6.0.0" (extended), would install "8.0.0").

Bug with cordova (ionic) url protocol

Hey,

I have an issue with the url protocol of video. In your code, you set url src="//www.youtube.com/embed/but in mobile app with cordova, the protocol is file:// so it throw an error...

I think today https is a requirement everywhere so we can just hardcoded src="https://www.youtube.com/embed/ in this lib.

If you're not agree with this, we can create a parameter to set the protocol manually and use it when it is set.

Let me know what do you want and I will create a PR ASAP.

Thanks!

Can't find module @angular/Http

Hello! It looks like the package is using an older version of the HTTP client. Here's the exact message:

ERROR in node_modules/ngx-embed-video/dist/src/embed-video.service.d.ts(1,22): error TS2307: Cannot find module '@angular/http'.

I think that needs to be updated to HttpClient, but I'm not totally sure. I'm going to try to hack at it for now but if you have a chance to take a look I'd really appreciated it!

Matt

preload option is available ??

preload option is available ??

Iframe sizes on diferent resolutions and devices

Hi Guys,

I really like your plugin but the only thing that I cant display an image thumb as it is giving me the {{ object.promise }} even when I store the result in a variable like this
let thumb_1 = this.embedService.embed_image(value.firstVideo);

and in the template i use:
<span [innerHtml]="battle.thumbOne"></span>

Introduce spec packages and write tests to cover cases

not working with CDN and storage-saved videos?

I have this url from a cdn storage which my video is on, and I wanna get it's thumbnail but it seems this library is just working with some specific urls and websites.
this is how i use the library:

backtory = 'https://storage.backtory.com/mediaad/video/1540286504509_video_2018-10-10_11-16-01.mp4'; console.log(this.embedService.embed_image(this.backtory ));

I expect this log to be src of a img tag in html, it turns to 'undefined' in the console.
can anybody help me out with the issue?

YouTube embeded URL link is not working

YouTube embed URL link is not working, output is undefined.
I had a issue when adding this embed link

https://www.youtube.com/embed/iHhcHTlGtRs

How to set autoplay for iframeHtml ?

I use ngx-embed-video/dist for my video section on web page. I try to set autoplay like it is write in documentation but it don't work for me. Who can help me with fixing it ?
Here I set iframeHtml

`
"<div class="videoPlayer" [innerHTML]="iframeHtml">"

loadVideo() {
if (this.validUrl.transform(this.video.url)) {
this.iframeHtml = this.embedService.embed(this.video.url, {
query: { autoplay: 1 }
});
}
}
`

Parsing/rendering fails when URL has additional query string params

If the video URL has extra params, the embed fails

Example

https://www.youtube.com/watch?v=tXsQJhoauxc&t=100s - Fails

https://www.youtube.com/watch?v=tXsQJhoauxc - Works

Ideally, the component should figure this out and call the required URL in proper format automatically

nocookie domain of youtube not being recognized

I would like to use the "no-cookie domains" for embedding, which would be "www.youtube-nocookie.com" for youtube.

The problem is, if i pass the no-cookie domain to this.embedService.embed(url), the response of the method is empty.

How can i properly set no-cookie properties to correctly get a safe embed code?

Same for "vimeo" please :-)

Thank you!

how to get time duration of video

how to get timeduartion of video

Upgrade to Angular 6?

It works with Angular 6 but i'm getting these warnings:

npm WARN [email protected] requires a peer of @angular/core@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/http@^4.0.0 but none is installed. You must install peer dependencies yourself.

embedding video with special character

Hello,

For youtube input video, if the video has special character like below:

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

Youtube will embed as below:

"https://www.youtube.com/embed/I5tMPyP6D5o

However, using your library, the embedded video is
https://www.youtube.com/embed/I5tMPyP6D5o&feature

which is not opening.

So, actual output, should ignore any text after the special character.

To fix this in my local dev, I added a helper function to detect such string:

santize(video) {

if (video.indexOf('&') !== -1){
  var spliitedVideo = video.split('&')
  video = spliitedVideo[0]
  return video
}

}

Just thought of informing you. Still able to use the library with this function.

Thanks,

Upgrading to Angular 12

When I try to ng update @angular/cli@12 @angular/core@12 on my angular 11 project which has "ngx-embed-video": "^1.0.4", as a dependency in package.json, I get the following error:

Package "ngx-embed-video" has an incompatible peer dependency to "@angular/common" (requires "^6.0.0" (extended), would install "12.0.5").

theater mode ,minidisplay missing

theater mode ,minidisplay missing

how do i autoplay ?

Property 'map' does not exist on type 'Observable<Response>

This library is Not working with Angular 6 due to change in the directory structure of the RxJs.

ERROR in node_modules/ngx-embed-video/src/embed-video.service.ts(147,8): error TS2339: Property 'map' does not exist on type 'Observable'.
node_modules/ngx-embed-video/src/embed-video.service.ts(167,8): error TS2339: Property 'map' does not exist on type 'Observable'.

Doesn't work with Typescript 2.6.2 or higher / Angular Package Format

I'll get this

ERROR in ./node_modules/ngx-embed-video/index.ts
Module build failed: Error: ..../node_modules/ngx-embed-video/index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
    at AngularCompilerPlugin.getCompiledFile (/...../node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:677:23)
    at plugin.done.then (...../node_modules/@ngtools/webpack/src/loader.js:467:39)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
ERROR in ./node_modules/ngx-embed-video/src/embed-video.service.ts
Module build failed: Error:..../node_modules/ngx-embed-video/src/embed-video.service.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
**The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).**
    at AngularCompilerPlugin.getCompiledFile (/...../node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:677:23)
    at plugin.done.then (....../node_modules/@ngtools/webpack/src/loader.js:467:39)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

getting error only with AOT

it's working fine with JIT but gives this error when compile with AOT.

i'm using-> ng serve --aot

angularJS version 6.0.8

How to manually update iframe width and height

using the youtbe video api

I am wondering how to use enablejsapi to be able to control the player.

I guess this is a feature request:
It would be cool to have access to the player api to be able to control it according to the official docs: https://developers.google.com/youtube/iframe_api_reference#Examples

Maybe this is already possible and I just did not understand how. :)

Some Angular 5 / Typescript issues

ERROR in node_modules/ngx-embed-video/src/embed-video.service.ts(205,26): error TS2345: Argument of type 'string' is notassignable to parameter of type 'never'.
node_modules/ngx-embed-video/src/embed-video.service.ts(229,5): error TS2322: Type 'null' is not assignable to type 'string'.
node_modules/ngx-embed-video/src/embed-video.service.ts(241,5): error TS2322: Type 'null' is not assignable to type 'string'.