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
ishttps://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.