Missing YouTube Featured Image on Blogger? Let's Fix It!

Ever notice your Blogger post looks a bit… empty without that YouTube featured image? It can be pretty frustrating when your video thumbnail doesn't show up as expected, just like the example I ran into above on my Median Ui Blogger Template. Let's dive into why this happens and, more importantly, how you can get those thumbnails to display correctly!

1. 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.
2. 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 performing the above solutions doesn't help try the below steps. Note that this is only for people who are using Median UI version 1.7 Blogger Template like mine.

1. On your Blogger dashboard go to Theme
2. Next click the the drop-down icon ▼ right beside CUSTOMIZE then click Edit HTML in the list.
3. now search for data:post.featuredImage.isYoutube and you will find the below marks:

      <!--[ 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, &quot;16:9&quot;) : 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, &quot;16:9&quot;) : 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, &quot;16:9&quot;) : data:post.featuredImage.youtubeMaxResDefaultUrl'/></noscript>
          <b:else/>

4. Change data:post.featuredImage.isYoutube to data:imgurl.isYouTube
5. Save your changes and refresh your blog.

Remember that Blogger and YouTube occasionally have glitches, so patience is key. If the issue persists, consider reaching out to their support teams for further assistance.