How to lazy load a youtube video embedded on an iframe?

Question

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>

I have tried to add loading="eager", loading="auto" and loading="lazyload"

use srcdoc property to load a placeholder image which is wrapped by linked to your youtube. this way youtube won't even load if user don't click on the image. something like the code below: srcdoc="▶" — Ramin Ahmadi, Jan 06 '20 at 10:43
Does this answer your question? [lazy load iframe (delay src http call) with jquery](https://stackoverflow.com/questions/7154958/lazy-load-iframe-delay-src-http-call-with-jquery) — Adam Strauss, Jan 07 '20 at 10:23
For me this works: https://stackoverflow.com/questions/37856498/lazy-load-youtube-video-from-iframe-api/68296861#68296861 — human, Jul 08 '21 at 07:04

score 2 · Answer 1 · answered Jan 08 '20 at 10:10

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>

Source:

https://codepen.io/chriscoyier/pen/GRKZryx

https://css-tricks.com/lazy-load-embedded-youtube-videos/

This can't be embedded in the page with other content – emir Oct 21 '20 at 21:03 — emir, Oct 21 '20 at 21:03

How to lazy load a youtube video embedded on an iframe?

1 Answers1

Linked