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

问题描述

我想在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);
  }

}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular iframe iframe javascript youtube-iframe-api