shorts + tiktok embed — artlu.ai
Vertical 9:16 shorts now sit alongside longform videos in the showcase. Each short opens a 2-col guidebook with both YouTube and TikTok embeds.
What is this?
Extends the artlu.ai video showcase to support vertical 9:16 short-form videos (think YouTube Shorts / TikTok) alongside the existing longform widescreen videos. Both formats live in the same homepage grid; each gets its own detail page tuned to the shape of the content.
What it does
- Homepage cards: shorts use a vertical 9:16 thumbnail on the left of the body (3:4 cropped, top-aligned). Longforms keep the 16:9 thumb on top. Same total card height regardless of format. SHORT badge on each shorts card.
- /video/:id detail page: longform stays single-column; shorts switch to a 2-col layout with the 9:16 video on the left and the guidebook content on the right. YouTube above TikTok when both exist.
- Shorts guidebook: summary (writing, video clips, audio, render, cost), recurring characters, beats grid (12 beat tiles each with first-frame thumbnail + narration + character + source chyron), sources (clickable when URLs are in script.md), full transcript, pre-roll disclosure with the shadowban "why".
How it works
Sync script (scripts/sync-video.mjs) branches on the format field in shipped-videos.json. Long format reads spoolcast-content/sessions/id/; short format reads shows/show/sessions/date/episode/. For shorts the script parses script.md (beat table, narration, source chyrons, cinematography, sources, pre-roll), extracts first frames from each clip mp4 via ffmpeg + cwebp, copies recurring character refs, and writes a "database-shaped" bundle.json (no filesystem paths, just public URLs). TikTok URL parsing extracts the video ID for the embed; YouTube uses the vertical oardefault.jpg thumbnail (720×1280) instead of the auto-letterboxed maxresdefault.
Built with
React + Vite, Node 22 sync script, ffmpeg, cwebp, YouTube + TikTok iframe embeds.