ngx-embed-video

Get embed code for embedding youtube/vimeo/dailymotion/* video in websites from URL or ID in Angular 2. Currently supports YouTube, Vimeo and Dailymotion. Feel free to make pull request to add others!

Installation

To install ngx-embed-video library, run:

$ npm install ngx-embed-video --save

Consuming EmbedVideo library

and then in your Angular AppModule:

import { HttpModule } from '@angular/http';
import { EmbedVideo } from 'ngx-embed-video';

@NgModule({
  imports: [
        HttpModule,

        EmbedVideo.forRoot()
  ]
})
export class AppModule {}

Once your library is imported, you can use it in your Angular application.

Example usage:

import { Component } from '@angular/core';
import { EmbedVideoService } from 'ngx-embed-video';

@Component({
    selector: 'app-component',
    templateUrl: './template.html',
})
export class AppComponent {

    vimeoUrl = "https://vimeo.com/197933516";
    youtubeUrl = "https://www.youtube.com/watch?v=iHhcHTlGtRs";
    dailymotionUrl = "https://www.dailymotion.com/video/x20qnej_red-bull-presents-wild-ride-bmx-mtb-dirt_sport";

    vimeoId = "197933516";
    youtubeId = "iHhcHTlGtRs";
    dailymotionId = "x20qnej";

    constructor(
        private embedService: EmbedVideoService
    ) {
        console.log(this.embedService.embed(vimeoUrl));
        console.log(this.embedService.embed(youtubeUrl));
        console.log(this.embedService.embed(dailymotionUrl));

        console.log(this.embedService.embed_vimeo(vimeoId));
        console.log(this.embedService.embed_youtube(youtubeId));
        console.log(this.embedService.embed_dailymotion(dailymotionId));
    }

}

Example output:

<iframe src="//player.vimeo.com/video/197933516" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe src="//www.youtube.com/embed/iHhcHTlGtRs" frameborder="0" allowfullscreen></iframe>
<iframe src="//www.dailymotion.com/embed/video/x20qnej" frameborder="0" allowfullscreen></iframe>

<iframe src="//player.vimeo.com/video/197933516" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe src="//www.youtube.com/embed/iHhcHTlGtRs" frameborder="0" allowfullscreen></iframe>
<iframe src="//www.dailymotion.com/embed/video/x20qnej" frameborder="0" allowfullscreen></iframe>

Usage

embed(url, [options])

Return an HTML fragment embed code (string) for the given video URL.

embed_vimeo(id, [options])

Return an HTML fragment embed code (string) for the given vimeo video ID.

embed_youtube(id, [options])

Return an HTML fragment embed code (string) for the given youtube video ID.

embed_dailymotion(id, [options])

Return an HTML fragment embed code (string) for the given dailymotion video ID.

embed_image(url, [options])

Returns an HTML <img> tag (string) for the given url and the link in a callback.

{
  link: http://img.youtube.com/vi/iHhcHTlGtRs/default.jpg,
  html: <img src="http://img.youtube.com/vi/iHhcHTlGtRs/default.jpg"/>
}

Options

query

Object to be serialized as a querystring and appended to the embedded content url.

Example

console.log(this.embedService.embed_vimeo("197933516", { query: { portrait: 0, color: '333' } }))

Output:

<iframe src="//player.vimeo.com/video/197933516?portrait=0&color=333" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

attributes

Object to add additional attributes (any) to the iframe

Example

console.log(this.embedService.embed('https://youtu.be/iHhcHTlGtRs', { query: { portrait: 0, color: '333' }, attr: { width: 400, height: 200 } }))

Output:

<iframe src="//www.youtube.com/embed/iHhcHTlGtRs?portrait=0&color=333" frameborder="0" allowfullscreen width="400" height="200"></iframe>

Youtube Image options

• default
• mqdefault
• hqdefault
• sddefault
• maxresdefault

this.embedService.embed_image('https://www.youtube.com/watch?v=iHhcHTlGtRs', { image: 'mqdefault' })

Vimeo Image options

• thumbnail_small
• thumbnail_medium
• thumbnail_large

this.embedService.embed_image('https://vimeo.com/197933516', { image: 'thumbnail_medium' })

Dailymotion Image options

• thumbnail_60_url
• thumbnail_120_url
• thumbnail_180_url
• thumbnail_240_url
• thumbnail_360_url
• thumbnail_480_url
• thumbnail_720_url
• thumbnail_1080_url

this.embedService.embed_image('https://www.dailymotion.com/embed/video/x20qnej', { image: 'thumbnail_720_url' })

License

MIT - SamirH