html Angular 5嵌入网址

Posted 2021-05-11

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'video-list',
  templateUrl: './video-list.component.html',
  styleUrls: ['./video-list.component.css']
})
export class VideoListComponent implements OnInit {

  title = "Video list title"
  videoList = [
    {
      name: 'Item 1',
      slug: 'item-1',
      embed: '2p89smQck44',
    },
    {
      name: 'Item 2',
      slug: 'item-2',
      embed: '2p89smQck44',
    },
    {
      name: 'Item 3',
      slug: 'item-3',
      embed: '2p89smQck44',
    },
  ]

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit() {
  }

  getVideoURL(embed) {
    return this.sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/' + embed);
  }

}

<div *ngFor="let video of videoList">
  <a href="videos/{{ video.slug }}">{{ video.name }}</a>
  <iframe width="560" height="315" [src]="getVideoURL(video.embed)" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>