Skip to content
HomeAboutActivityPortfolioBlogAsk AI

Why Popular Video Cards Have No Thumbnails

Adityo Guni Waluyo

Popular marquee cards checked explicit thumbnails, leaving video items on gradients. Fix: explicit thumbnail → i.ytimg hqdefault → gradient. hqdefault always exists for public videos.

#frontend#performance#nextjs#youtube

TL;DR

Video items showed a gradient placeholder. A fallback chain was added to display thumbnails. It uses YouTube's image CDN for video thumbnails.

The Problem: Video Items Show Only a Gradient Placeholder

I opened the KotaPortal "Popular Articles" marquee and video items looked broken: just a blue-purple gradient placeholder, no thumbnail. Digging into the code: PopularMarquee only checked for an explicit thumbnail field. Video entities from YouTube don't have that — they have video_youtube_id.

The Fix: A Fallback Chain in the Component

Commit 65ed6ab adds a fallback chain in the component: explicit thumbnail if present, construct i.ytimg.com/vi/{videoId}/hqdefault.jpg, then gradient placeholder. hqdefault (480x360) always exists for public videos [7][8]. maxresdefault (1280x720) only exists for HD videos — don't use it without a fallback.

Configuration & Implementation

Next.js next/image needs remotePatterns for external domains [9]. CSP img-src already allows i.ytimg.com + img.youtube.com. No YouTube Data API quota needed — pure image CDN fetches.

const getPoster = (item: PopulerItem) => {
  if (item.thumbnail) return item.thumbnail
  if (item.video_type === 'youtube' && item.video_youtube_id) {
    return `https://i.ytimg.com/vi/${item.video_youtube_id}/hqdefault.jpg`
  }
  return '/gradient-placeholder.svg'
}

PopulerItem type + 3 pillar mappings (olahraga/kebudayaan/kepemudaan) now carry video_type + video_youtube_id. Read-path only, no user input.

Sources

  1. ThumbnailsGrabber: maxresdefault not always present; hqdefault always exists
  2. open-navigator/youtubeThumbnail.ts: hqdefault guaranteed; maxresdefault needs fallback
  3. Next.js Image: remotePatterns for i.ytimg.com / img.youtube.com

Related articles

frontend

Why the "Popular" Marquee Across Three Pillars Looks Empty — and How to Fill It

Marquee populer 3 pilar (olahraga/kebudayaan/kepemudaan) kosong di pilar muda. Fix: parallel fetch popular + random, mergePopularWithRandom dedupe by id, popular priority, slice 9.

frontend

The Validation Gate Before Third-Party Photos Enter a Grid

Name matching first, image checked after load, revert when in doubt: the validation gate that keeps third-party photos from poisoning a public grid.

testing

Writing E2E Tests for a Page That Postpones Its Fetch

A 52-line E2E spec for a listing page that debounces 350 ms: zero waitForTimeout, assertions that retry on their own, and five data-testid hooks.

frontend

Three 7-Line Routes, One 471-Line Component

The Kelembagaan admin module: three 7-14 line server routes, one 471-line client editor, a 350 ms debounced list, and an id guard that throws 404.

backend

Two Sets: What You May Read, What You May Manage

Opening read access across departments without loosening writes: readable and manageable module sets as two separate fail-closed sets.

frontend

The Date That Shifted by Itself: Pin the Timezone at Render

Data right, display wrong: toLocaleString without timeZone lets a UTC server and a WIB browser render different dates. Pin it at the presentation layer.

frontend

Mirroring the Status Transition Map in the Frontend

A tiny frontend mirror of the backend transition map: one union type, one map, and impossible options disabled before the click.

frontend

One Design Language for Every Page

The homepage redesign left five subpages looking like a different website. The fix was not restyling each page by hand but extracting shared components.