angular-embed-video
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.4 • Public • Published

    angular-embed-video

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

    Installation

    To install angular-embed-video library, run:

    $ npm install angular-embed-video --save

    Consuming EmbedVideo library

    and then in your Angular AppModule:

    import { EmbedVideoModule } from 'angular-embed-video';
    
    @NgModule({
      imports: [EmbedVideoModule]
    })
    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 'angular-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(this.vimeoUrl));
        console.log(this.embedService.embed(this.youtubeUrl));
        console.log(this.embedService.embed(this.dailymotionUrl));
    
        console.log(this.embedService.embed_vimeo(this.vimeoId));
        console.log(this.embedService.embed_youtube(this.youtubeId));
        console.log(this.embedService.embed_dailymotion(this.dailymotionId));
      }
    }

    Example output:

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

    Example usage with sanitized innerHtml iframe:

    import { Component } from '@angular/core';
    import { EmbedVideoService } from 'angular-embed-video';
    
    @Component({
      selector: 'app-component',
      template: '<div [innerHtml]="iframe_html"></div>',
    })
    export class AppComponent {
      iframe_html: any;
      youtubeUrl = "https://www.youtube.com/watch?v=iHhcHTlGtRs";
    
      constructor(
        private embedService: EmbedVideoService
      ) {
        this.iframe_html = this.embedService.embed(youtubeUrl);
      )
    }

    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: //img.youtube.com/vi/iHhcHTlGtRs/default.jpg,
      http: 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

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

    Output:

    <iframe
      src="https://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

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

    Output:

    <iframe
      src="https://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' }
      )
      .then(res => {
        this.thumbnail = res.html;
      });

    Vimeo Image options

    • thumbnail_small
    • thumbnail_medium
    • thumbnail_large
    this.embedService
      .embed_image(
        'https://vimeo.com/197933516', 
        { image: 'thumbnail_medium' }
      )
      .then(res => {
        this.thumbnail = res.html;
      });

    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/video/x20qnej_red-bull-presents-wild-ride-bmx-mtb-dirt_sport',
        { image: 'thumbnail_720_url' }
      )
      .then(res => {
        this.thumbnail = res.html;
      });

    License

    MIT

    Install

    npm i angular-embed-video

    DownloadsWeekly Downloads

    1

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    84.3 kB

    Total Files

    14

    Last publish

    Collaborators

    • shaan_hashmi