Resolving YouTube Thumbnails Display Glitch in Median Ui Blogger Template

The absence of a YouTube featured image on your Blogger posts can be frustrating like the featured image above that I encountered. Let’s explore some possible reasons and solutions:

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 codes:

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