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 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!