Skip to content

feat(youtube): explain Shorts thumbnail caveat with a reusable info tooltip#1699

Open
giladresisi wants to merge 1 commit into
mainfrom
feat/youtube-thumbnail-info-tooltip
Open

feat(youtube): explain Shorts thumbnail caveat with a reusable info tooltip#1699
giladresisi wants to merge 1 commit into
mainfrom
feat/youtube-thumbnail-info-tooltip

Conversation

@giladresisi

Copy link
Copy Markdown
Collaborator

Problem

A user reported that thumbnails set on YouTube Shorts don't propagate. Importantly, their posts don't fail — the video publishes fine and no error is surfaced. The thumbnail just never appears.

Root cause is a YouTube platform limitation, not a Postiz bug: the Data API's thumbnails.set call returns HTTP 200 success but is silently ignored for videos YouTube classifies as Shorts — YouTube generates a thumbnail from a video frame instead. Postiz can't control whether a video becomes a Short: that's YouTube's decision based on vertical aspect ratio + duration (≤ 3 min), and there is no API flag to opt in or out. So a custom thumbnail on a Short is inherently best-effort.

It also requires a verified channel and a JPEG/PNG under 2 MB, which isn't communicated anywhere in the UI.

What this PR does

Adds an "(i)" info tooltip next to the YouTube Thumbnail setting explaining the Shorts caveat and the format/verification requirements, so users understand why a thumbnail may not show up.

  • New reusable InfoTooltip component (apps/frontend/src/components/ui/info.tooltip.tsx) — a circled-"i" icon wired to the app's existing global react-tooltip instance (<Tooltip id="tooltip" />). Reusable from any file: <InfoTooltip content="…" />.
  • MediaComponent.label widened from stringReactNode (backward compatible — all existing string callers stay valid) so a label can carry the icon inline.
  • Global tooltip (top.tip.tsx) given a max-width + wrapping so long content renders as a compact box instead of a screen-spanning bar. This is a max, so existing short tooltips are unaffected.

Screenshot

Hovering the "(i)" next to Thumbnail shows a compact, wrapped tooltip:

YouTube — not Postiz — decides if a video is a Short (vertical, up to 3 min). For Shorts, YouTube often ignores custom thumbnails and uses a video frame instead, without reporting an error — so a thumbnail here is best-effort. Custom thumbnails also need a verified channel and a JPEG or PNG under 2MB.

References

  • YouTube Data API — Thumbnails: set
  • Google Issue Tracker #381127084 — custom thumbnails ignored on Shorts (see the July 2026 comment confirming the API accepts the request but the thumbnail isn't applied to Shorts)
  • Community tool documenting the workaround/constraints (1280×720, < 2 MB, center-crop on small devices): jbreed/yt-thumbnail-upload

Notes / follow-up

This PR is UI-only (sets expectations). A separate follow-up should make the server-side thumbnail step best-effort in youtube.provider.ts — today, when the API does actively reject a thumbnail (bad format/size, unverified account), it throws BadBody after the video is already published, marking the whole post failed (and risking a duplicate re-upload). That path should return success with the video's postId + a warning instead.

🤖 Generated with Claude Code

…ooltip

Users reported that thumbnails set on YouTube Shorts don't propagate. The
posts themselves do NOT fail — YouTube's Data API accepts thumbnails.set
(HTTP 200) but silently ignores the custom thumbnail for videos it classifies
as Shorts, generating one from a video frame instead. Postiz can't control
whether a video becomes a Short (that's YouTube's call, based on vertical
aspect ratio + duration), so setting a thumbnail there is best-effort.

Add an "(i)" info tooltip next to the YouTube Thumbnail setting explaining
this, plus the verified-channel and JPEG/PNG < 2MB requirements.

- New reusable InfoTooltip component (apps/frontend/.../ui/info.tooltip.tsx)
  wired to the existing global react-tooltip instance — usable from any file.
- Widen MediaComponent's `label` prop to ReactNode (backward compatible) so a
  label can carry the icon.
- Give the shared tooltip a max-width + wrapping so long content renders as a
  compact box instead of a full-width bar.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@postiz-contribution postiz-contribution Bot added the contribution:approved Approved contributor label Jul 9, 2026
@postiz-contribution

Copy link
Copy Markdown

Contribution-checker quality warning
Heuristic score: 0/100 (low). This is a non-blocking warning surfaced by the project's quality settings.

Heuristics that flagged:

  • Wall-of-text PR body: 3146 chars (>2500)
  • Excessive inline code references: 15 inline refs (>3)
  • PR doesn't use the repo's PR template: 5 required checkbox items missing (max 1, match ≥80%)
  • Body adds too many extra headers beyond the template: 5 extra headers (>1)
  • AI watermark phrase: Matched: "Generated with Claude Code"
  • Commit message too long: Longest: 1115 chars
  • Excessive added comments: 9 added comment lines (ratio 0.16)

If this is a genuine contribution, please add detail to your PR description and tighten the diff scope before reviewers look at it.

@postiz-agent

postiz-agent Bot commented Jul 9, 2026

Copy link
Copy Markdown

Snyk checks have passed. No issues have been found so far.

Status Scan Engine Critical High Medium Low Total (0)
Open Source Security 0 0 0 0 0 issues
Licenses 0 0 0 0 0 issues
Code Security 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

contribution:approved Approved contributor

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant