How to embed a video in angular component?

Question

I have angular 8 application and I can embed Youtube videos. But for example this url: https://vimeo.com/346340496/11432ab1db it will not work. So how can I get it working with also vimeo, or a generic solution. So that you can embed youtube, vimeo, other format...etc.

This is the code I have:

private getVideoSafeUrl(url: string): SafeResourceUrl {
    const embedUrl = this.parseYoutubeUrl(url);
    const safeUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(
      this.parseYoutubeUrl(embedUrl)
    );
    return safeUrl;
  }

  private parseYoutubeUrl(url: string): string {
    let returnUrl = url;
    const splitString = url.split('?');
    if (splitString.length > 1) {
      const baseUrl = splitString[0].replace('watch', 'embed');
      let videoId;
      const queryString = splitString[1];
      const newQueryString = queryString
        .split('&')
        .reduce((prev, cur) => {
          const entryArray = cur.split('=');
          if (entryArray[0] === 'v') {
            videoId = entryArray[1];
          } else {
            prev.push(cur);
          }
          return prev;
        }, [])
        .join('&');
      returnUrl = `${baseUrl}/${videoId}?${newQueryString}`;
    }
    if (url.indexOf('youtu.be') !== -1) {
      returnUrl = url.replace(/.*youtu\.be\/(.*)/g, (match, g1) => {
        return `https://youtube.com/embed/${g1}`;
      });
    }
    return returnUrl;
  }

and this is the template of it:

  <ng-container *ngIf="is('VideoDisplay')">
          <iframe
            *ngIf="videoUrl.value"
            class="video-iframe"
            type="text/html"
            [src]="getVideoSafeUrl(videoUrl.value)"
            frameborder="0"
            allowfullscreen
          ></iframe>
          <mat-form-field>
            <input
              matInput
              type="url"
              name="videoUrl"
              ngModel
              #videoUrl="ngModel"
              placeholder="Url of video"
              i18n-placeholder
              required
            />
            <mat-error>
              <app-element-edit-field-error
                [errors]="videoUrl.errors"
              ></app-element-edit-field-error>
            </mat-error>
          </mat-form-field>
        </ng-container>

so my question is: how can I have it working with viemo, or a generic solution?

Thank you.

Answer 1

You would have to extend function getVideoSafeUrl to include vimeo videos.

Consider this approach

private getVideoSafeUrl(url: string): SafeResourceUrl {
    let safeUrl = '';

    if(this.isVimeoUrl(url)) {
      safeUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(
        this.parseVimeoUrl(url)
      );

      return safeUrl;
    }

    safeUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(
      this.parseYoutubeUrl(url)
    );
    return safeUrl;
  }

isVimeoUrl function checks whether url is from Vimeo.

parseVimeoUrl function would extract video_id from https://vimeo.com/346340496/11432ab1db.

In this case this value is 346340496, and compute new url with structure https://player.vimeo.com/video/{video_url}

There is Vimeo developer site which explain things in detail.

source

Example embed iframe

 <iframe src="https://player.vimeo.com/video/346340496" width="320" height="200" frameborder="0" title="test" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>