Darian Nocera
Code Me Up, Daddy

Code Me Up, Daddy

How to Lazy Load an Embedded Youtube Video

How to Lazy Load an Embedded Youtube Video

Darian Nocera's photo
Darian Nocera

Published on Dec 18, 2020

1 min read

This is an example of how to display the responsive, still image thumbnail for a Youtube video and only load the video once the user interacts with the video or clicks the 'play button'.

Basic Steps ✔

  • Grab the Youtube ID from the URL of any Youtube video youtube_url.png

  • The image path for the thumbnail is https://i.ytimg.com/vi/{Youtube ID}/maxresdefault.jpg

  • The embed URL for the iframe src is https://www.youtube.com/embed/{Youtube ID}?autoplay=1

Typically you would not want to include ?autoplay=1 to autoplay the video because that's annoying af, but in this case, we're loading the video only once the user has already clicked on it to play it.

  • Using Javascript, swap out the image container with a responsive video container and the iframe with the embed URL.
  • Credit to this repo for the idea for the play button css.

Thanks for reading. Feel free to connect with me on LinkedIn!

 
Share this