延迟在Angular 5中加载嵌入式YouTube视频

Question

我想在Angular的页面中实现嵌入式YouTube视频的延迟加载。最初，在加载页面时，我将显示我的所有YouTube视频，并且在单击播放按钮之前，我不希望加载视频。我通过此链接了解了一些技巧，可以使用srcdoc属性而不是src来实现此目的， https://css-tricks.com/lazy-load-embedded-youtube-videos/

但是，由于某种原因，用于放置静态图像和播放按钮的CSS似乎不起作用。我无法确定为什么它不起作用，并且会感谢任何人的帮助。下面是我要使用的HTML和TS文件代码。

videos.app.html

<div class="col-md-4" *ngFor="let video of videos">
<iframe width="100%" height="315" srcdoc="<style*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href={{video.embedUrl}}?autoplay=1><img src=https://i.ytimg.com/vi/{{video.videoId}}/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLAy_BbpIDxCwMRz0xwLGKTHHNDIYA><span>▶</span></a>"[src]="video.embedUrl | sanitizeurl" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<h3 class="my-3 video-section-heading">{{video.name}}</h3>
<p class="text-muted video-section-subheading">{{video.description}}</p>
</div>

videos.app.ts

videos: any[] = [
    {
      name: 'Jagadhodharana',
      description: 'Performance in the 67th art festival In MFAC on Dec 6th2018.' +
      'Orchestra' +
      'Choreography and nattuvangam:Guru Pandanallur S pandian' +
      'Vocal:Pozhakudi G R Praveen' +
      'Mirdangam: Mayavaram T Vishwanathan' +
      'Violin:Sri Kalaiarasan',
      embedUrl: 'https://www.youtube.com/embed/hEB9ilzkowY',
      videoId: 'hEB9ilzkowY',
    },
    {
      name: 'Bharathanatyam |Mohamana | Bhairavi Varanam',
      description: 'Performance at Mylapore Fine Arts Club - 2019' +
      'Nattuvangam and Choreography - Kalaimamani Pandanalur S Pandian' +
      'Vocal - Pozhakudi G R Praveen' +
      'Mridangam - Mayavaram T Viswanathan' +
      'Violin - Sri Kalaiarasan',
      embedUrl: 'https://www.youtube.com/embed/MWl75SMF1Jc',
      videoId: 'MWl75SMF1Jc',
    },
    {
      name: 'Bharatanatyam Dance |Idai vida veru venumo Sakshi | Saveri | Rupakam',
      description: 'Performance at MFAC annual dance festival 2018.' +
      'Choreography and Nattuvangam: Kalaimamani Pandanalur Sri S Pandian' +
      'Vocal: Pozhakudi Sri G R Praveen' +
      'Mridangam: : Mayavaram Sri T Viswanathan' +
      'Violin: Sri Kalaiarasan',
      embedUrl: 'https://www.youtube.com/embed/TqQDQzcp-_w',
      videoId: 'TqQDQzcp-_w'
    }]

sanitizeurl.pipe.ts

@Pipe({
  name: 'sanitizeurl'
})
export class SanitizeurlPipe implements PipeTransform {

  constructor(private domSanitizer: DomSanitizer) {}

  transform(value: any, args?: any): any {
    return this.domSanitizer.bypassSecurityTrustResourceUrl(value);
  }

}