Lazy load embedded YouTube videos

Avoid the added bloat, load time, and tracking of embedded YouTube videos until the user interacts with the media.

This seemingly simple trick is actually very clever. It is able to keep most of the look and feel of your YouTube embed whilst saving loads of data and nasty tracking scripts from the Google monolith.

How to lazy load YouTube embeds

The technique utilises srcdoc, a feature of <iframe> that allows you to put the entire contents of an HTML document in the attribute.

Even better, we can now use native browser lazy loading to improve this even further, saving even more bytes on the initial page load as there are no requests to the server if the video isn’t in the viewport.

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/7V8oFI4GYMY"
  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:2em;text-align:center;font:48px/2 sans-serif;color:white;text-shadow:0 0 0.5em black;}</style><a href='https://www.youtube.com/embed/7V8oFI4GYMY' role='button' aria-label='Play video' title='Play video'><img src='https://img.youtube.com/vi/7V8oFI4GYMY/hqdefault.jpg' alt='Video - What is sustainable development' /><span>▶</span></a>"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  title="What is sustainable development"
  loading="lazy"
></iframe>

Check out the CodePen example here.

Adding autoplay functions

If you need the video to autoplay once you click the facade, you can add ?autoplay=1&mute=1 to the end of the embed url of the anchor link inside the srcdoc. Like this.

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/7V8oFI4GYMY"
  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:2em;text-align:center;font:48px/2 sans-serif;color:white;text-shadow:0 0 0.5em black;}</style><a href='https://www.youtube.com/embed/7V8oFI4GYMY?autoplay=1&mute=1' role='button' aria-label='Play video' title='Play video'><img src='https://img.youtube.com/vi/7V8oFI4GYMY/hqdefault.jpg' alt='Video - What is sustainable development' /><span>▶</span></a>"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  title="What is sustainable development"
  loading="lazy"
></iframe>

Check out the CodePen example here.

Conclusion

We think this is a great little trick that saves having to load additional scripts, and if you have many embeds on one page, potentially significant reduction in loading times. While it does mean you are still loading an image for the background from YouTube, at least you have a little more control. By adding in loading="lazy" you can save your users from loading that image if the page loads without the embed within the viewport, or at all if they never scroll to it.

It does have its downsides though. One is that it is tricky to style the simple Play button to look like YouTube’s. For some users, this may cause distrust. For others, it could improve trust through the use of a company-branded play icon.

 
References: css-tricks.com / dev.to



What to read next

More from our resources, blogs and case studies

Find this resource useful?

I hope so. I want everyone to be able to benefit from articles like this one. That is why I'm kindly asking for your support.

These resources take time to research and write. The site is run by one person, with occasional volunteer contributors in spare time. Please consider supporting the project if you can.

Plant a tree with Ecologi or Donate £3