How to Lazy Load an Embedded Youtube Video

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!

No Comments Yet