如何延迟加载内嵌在iframe上的youtube视频? [英] How to lazy load a youtube video embedded on an iframe?
本文介绍了如何延迟加载内嵌在iframe上的youtube视频?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何将延迟加载应用于嵌入视频的 iframe
?
How do I apply lazy loading to an iframe
embedding a video?
<iframe src="https://www.youtube.com/embed/teL-R6yimDY"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen=""
width="560"
height="315"
frameborder="0"></iframe>
我尝试添加 loading ="eager"
, loading ="auto"
和 loading ="lazyload"
推荐答案
您可以在 iframe
标记内使用 srcdoc
属性来加载图像.请参阅以下示例作为参考:
You can use srcdoc
attribute inside your iframe
tag to load an image. Please see the following example as reference:
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/Y8Wp3dafaMQ"
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=https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'><span>▶</span></a>"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
title="The Dark Knight Rises: What Went Wrong? – Wisecrack Edition"
></iframe>
来源:
https://codepen.io/chriscoyier/pen/GRKZryx
https://css-tricks.com/lazy-load-嵌入式YouTube视频/
这篇关于如何延迟加载内嵌在iframe上的youtube视频?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文