How to Embed a YouTube Thumbnail on Your Website
Paste any video link to grab its thumbnail, then put that image on your own page. Use it as a clickable link to the video, a fast click-to-load poster, or a preview image.
Paste any video link to grab its thumbnail, then put that image on your own page. Use it as a clickable link to the video, a fast click-to-load poster, or a preview image.
Once you have a video's thumbnail image, putting it on your own site is straightforward. The tricky part is knowing which of three jobs you actually want it to do: be a clickable image that opens the video, be a lightweight stand-in that loads the real player only when someone clicks (a big page-speed win), or be the preview image that shows when your page is shared. This guide covers all three, plus whether to hotlink or host the file. Start by pasting a link into the box above to grab the image, then pick the pattern you need.
Grab the thumbnail with the tool above (the 1280x720 maxresdefault is the sharpest), then drop the image on your page inside a link that points at the video. That is the whole job for a blog post, a newsletter, or an email: a clean picture people can click to watch. The extra techniques below, a click-to-load facade and a shared-link preview, are variations on that same image, each solving a different problem.
The simplest embed is an image wrapped in a link to the video. The whole thumbnail becomes clickable and opens the watch page in a new tab. This is what you want in most articles, emails, and newsletters, where a real embedded player is overkill or is not even allowed.
<a href="https://www.youtube.com/watch?v=VIDEO_ID" target="_blank" rel="noopener">
<img src="https://i.ytimg.com/vi/VIDEO_ID/maxresdefault.jpg"
alt="Watch: the video title" width="1280" height="720">
</a>Swap VIDEO_ID for the 11-character ID in the video's link, and write real alt text describing the video. The width and height attributes reserve the space so your layout does not jump while the image loads. To pull the ID out of any link format, the YouTube thumbnail URL guide shows the exact address pattern and how to extract the ID.
A real YouTube embed loads a megabyte or more of scripts on every single page view, even for visitors who never press play. A facade fixes that: you show the thumbnail as a poster, and only build the heavy iframe when someone actually clicks. It is the single biggest speed win for any page with videos on it, and it is why lazy-loading a YouTube embed is such a common request.
<div class="yt-facade" data-id="VIDEO_ID">
<img src="https://i.ytimg.com/vi/VIDEO_ID/maxresdefault.jpg" alt="Play the video" loading="lazy">
<button type="button" aria-label="Play video">Play</button>
</div>
<script>
document.querySelectorAll('.yt-facade').forEach(function (box) {
box.addEventListener('click', function () {
var id = box.getAttribute('data-id');
var frame = document.createElement('iframe');
frame.width = 560; frame.height = 315; frame.allow = 'autoplay';
frame.src = 'https://www.youtube.com/embed/' + id + '?autoplay=1';
box.replaceWith(frame);
});
});
</script>On click the thumbnail is replaced by the normal embed with autoplay, so the video starts immediately. Style the button as a play icon over the image with CSS. The image still comes straight from the tool above, so grab the largest size for a crisp poster.
The same file works as a blog post's featured image or as the preview that shows when your page is shared. Save the thumbnail, host it on your site, and point your page's og:image and twitter:image meta tags at it. Then a link to your page on WhatsApp, Discord, Slack, or LinkedIn shows the thumbnail in the card. If a share shows an old or missing image, the platform cached the preview the first time it saw the link; see why a thumbnail is not showing or updating to force a refresh.
You can point an img tag straight at i.ytimg.com, and it will load, because that is exactly how YouTube serves thumbnails. That is perfect for a quick test. For a page that gets real traffic, download the image and host your own copy instead. You then control caching, you are not broken by a missing maxresdefault.jpg on an older video, and you are not depending on a URL that YouTube could change. Whichever you choose, remember the image is the creator's, so pick the sharpest size the tool returns and keep your own copy tidy.
Use maxresdefault.jpg for the crispest 1280x720 image. Not every video has it, though, so if you are generating embeds in bulk, fall back to sddefault.jpg and then hqdefault.jpg when the larger file is missing, and check that the image you got back is not the 120x90 gray placeholder. The URL guide lists every stored size and a ready-made fallback function, and the thumbnail size guide explains what each size is for.
Embedding a thumbnail as a link to the video is normal and low risk, close to what YouTube's own share cards do, and crediting the creator is good practice. Re-hosting someone's thumbnail as if it were your own content, or using it to imply a partnership, is where you can need permission. Before you republish a thumbnail beyond a simple link, read the rules on using someone else's thumbnail.
Grab the thumbnail with the tool above, then add the image to your page. Reference YouTube's public image URL or host your own copy, and put the image inside a link to the video's watch page so clicking it opens the video. Add alt text and width and height so the page does not shift as it loads.
Wrap the img tag in an a tag whose href is the video's watch URL, like https://www.youtube.com/watch?v=VIDEO_ID. The whole thumbnail becomes clickable and opens the video, which is the simplest way to add a video link to a blog post, a newsletter, or an email.
A facade shows the thumbnail as a lightweight poster and loads the heavy YouTube iframe only when a visitor clicks it. A real embedded player pulls in a megabyte or more of scripts on every page load, so swapping it for one image until the click makes the page much faster. On click you replace the image with the iframe and autoplay the video.
Hotlinking YouTube's image server works and is how YouTube itself serves the images, so it is fine for a quick test. For real traffic, download the thumbnail and host your own copy so you control caching and are not exposed to a missing maxresdefault or a URL change. Either way the image stays the creator's copyright.
Save the thumbnail, host it on your site, and point your page's og:image and twitter:image meta tags at that image. When someone shares your page, the thumbnail shows in the preview card. If an old or wrong image appears, the platform cached it and you need to refresh the preview.
A thumbnail is the creator's copyrighted image. Linking to a video with its thumbnail is normal and low risk, much like YouTube's own share cards, and crediting the creator helps. Re-hosting a thumbnail as your own content or implying a partnership can need permission. See the rules on using someone else's thumbnail.
Have a video to embed? Paste its link above, or open the YouTube thumbnail grabber homepage.