Ever noticed your Blogger post looking a bit… empty? It’s frustrating when your YouTube thumbnail refuses to show up, leaving a big gap where your featured image should be. I ran into this exact issue recently while using the Median UI template. Let’s look at why this happens and, more importantly, how to get those thumbnails pulling through correctly!
- Thumbnail Not Set in YouTube Video:
- Ensure that you’ve set a custom thumbnail for your YouTube video. Without a thumbnail, Blogger won’t display any image.
- To set a custom thumbnail on YouTube:
- Go to your video’s Edit page.
- Click on Custom thumbnail and upload an image.
- Save your changes.
- Image URL Issues:
- Check if the image URL is correct. Sometimes, incorrect URLs prevent images from displaying.
- Make sure the image URL starts with either http:// or https://.
- If the URL lacks either protocol, add http:// before the domain (e.g., src="//sample.com/image.jpg" should become src="http://sample.com/image.jpg").
- Republish the post to see if the thumbnail appears.
If those first few fixes didn't do the trick, give these steps a shot. Just a heads-up: this specific solution is for anyone using Median UI v1.7, which is the same version I'm running on my blog.
- On your Blogger dashboard go to Theme
- Next click the the drop-down icon ▼ right beside CUSTOMIZE then click Edit HTML in the list.
- now search for data:post.featuredImage.isYoutube and you will find the below marks:
- Change data:post.featuredImage.isYoutube to data:imgurl.isYouTube
- Save your changes and refresh your blog.
<!--[ Post Thumbnail ]-->
<b:includable id='postThumbnail'>
<b:comment>If there is a youtube video in the post</b:comment>
<b:if cond='data:post.featuredImage.isYoutube'>
<b:if cond='!data:view.isPreview'>
<img class='img lazy' expr:alt='data:post.title ? data:post.title : data:messages.image' expr:data-src='data:post.featuredImage.youtubeMaxResDefaultUrl.isResizable ? resizeImageundefineddata:post.featuredImage.youtubeMaxResDefaultUrl, 480, "16:9") : data:post.featuredImage.youtubeMaxResDefaultUrl' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
<b:else/>
<img class='img' expr:alt='data:post.title ? data:post.title : data:messages.image' expr:src='data:post.featuredImage.youtubeMaxResDefaultUrl.isResizable ? resizeImageundefineddata:post.featuredImage.youtubeMaxResDefaultUrl, 480, "16:9") : data:post.featuredImage.youtubeMaxResDefaultUrl'/>
</b:if>
<noscript><img class='img' expr:alt='data:post.title ? data:post.title : data:messages.image' expr:src='data:post.featuredImage.youtubeMaxResDefaultUrl.isResizable ? resizeImageundefineddata:post.featuredImage.youtubeMaxResDefaultUrl, 480, "16:9") : data:post.featuredImage.youtubeMaxResDefaultUrl'/></noscript>
<b:else/>Just a heads-up: Blogger and YouTube can be a little glitchy sometimes, so you might need a bit of patience while things sync up. If you’ve tried everything and it’s still not working, it might be time to give their support teams a shout to see what's going on.
