# 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. Type: project entry Published: 2026-05-01 [Original page]() [Browse this group]() Parent project: artlu.ai Recorded status: launched Updated: 2026-05-20T19:37:39.331Z Technologies: React, Vite, Node.js, spoolcast, ffmpeg, cwebp, YouTube, TikTok Tags: artlu, dev tool ## Details **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. ## Links [Site or demo]() ## Related build notes [shorts in the video showcase]() Status and dates describe the published record, not a recent test of an external service. Missing details are not inferred. Public links do not imply an open-source licence or permission to reuse material. [Directory]()