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
The image path for the thumbnail is
The embed URL for the
Typically you would not want to include
?autoplay=1to 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.
- Credit to this repo for the idea for the play button css.