# OG Video Preview > An open-source agent skill that turns any approved og:image into a looping og:video, so link previews move. An agent skill for Claude Code, OpenAI Codex, Cursor and agents supporting Agent Skills. Built by Joe Hu. MIT licensed; eval images belong to their owners. ## Install ```sh npx skills add hubeiqiao/og-video-preview ``` ## How it works The skill reads and classifies elements in an approved image, cuts them over a refilled background, and gives each kind its own motion. It renders a seamless 4-second loop at 60 fps and checks frame-0 identity, the loop seam and file-size budgets. It writes Open Graph tags and checks HTTP Range support (206). It can also render an HTML card. ## Where og:video plays The README and skill reference record support checked on 2026-10-30: iMessage autoplays muted and loops; Discord uses an inline player with a play button. Telegram played it as a looping GIF in our test on 2026-10-30. Slack, X, Facebook, LinkedIn, WhatsApp, Signal, Bluesky, Mastodon and Matrix show the still. See the skill reference for conditions and sources. ## Evaluation 103 real OG images, 103 passing results, 934 elements read, with no hand tuning. Checks: frame-0 mean difference <= 2 and local defects <= 0.05%; seam at most 1.5 normal frame steps; MP4 <= 2 MB and JPEG <= 180 KB. Results describe the checked-in eval, not a guarantee for every input. ## FAQ ### What is an og:video? A short, silent, looping MP4 that link previews can play in place of the share image (og:image). OG Video Preview makes one from the og:image you already have, so the link preview moves. ### Where do og:video link previews play? iMessage autoplays it, muted and looping. Discord shows an inline player with a play button. Telegram plays it as a looping GIF, though an earlier device test saw only the still, so clients may differ. Slack, X, Facebook, LinkedIn, WhatsApp, Signal, Bluesky, Mastodon and Matrix show the still image. Checked on 2026-10-30. ### What happens in apps that cannot play video? Nothing breaks. They show your og:image, which is the same approved image as frame 0 of the video, so the preview is never worse than it is today. ### Does it work on any image? It works from any approved PNG or JPG, made in Figma, Canva or code, or from an HTML card. It reads what each element is (headline, label, logo, pill, photo, line and more), cuts it out over a refilled background and gives each kind its own motion. It is tested on the OG images of 103 well-known sites with no hand tuning, and 103 of them pass every check. ### How do I install it? Run npx skills add hubeiqiao/og-video-preview, install it as a Claude Code plugin, or clone the repository into your skills folder. It works with Claude Code, OpenAI Codex, Cursor and other agents that support the Agent Skills standard. Then ask: Use /og-video-preview to make my og:image move. ### What does it need to run? Python 3 with playwright, Pillow, opencv-python and numpy; Google Chrome; ffmpeg and ffprobe. Tesseract is optional and helps it read type on photos. ### Why does my og:video only show a still in iMessage? Apple's players first request Range: bytes=0-1 and play only when the server answers 206 Partial Content. Static assets on Cloudflare Workers answer 200 with the whole file, so the preview falls back to the still. The skill checks for this with scripts/check_live.sh and ships worker/range-worker.js to fix it. ### How long and how large is the video? A seamless 4-second loop at 60 fps that starts on the approved image and loops back to it. The eval keeps every MP4 under 2 MB and every frame-0 JPEG under 180 KB. ### Can every object in an illustration move? Yes, with a clean background: the same image with every element removed, made with any image-edit tool and passed as --plate. Then nothing has to stay in place, and every visual keeps moving through the loop on its own path while type stays readable. ### Is it free? Yes. OG Video Preview is open source under the MIT License. The eval images belong to their owners and are used only as test inputs. ## Links - [Landing page](https://hubeiqiao.com/og-video-preview/) - [Repository and README](https://github.com/hubeiqiao/og-video-preview) - [Skill reference](https://github.com/hubeiqiao/og-video-preview/blob/main/SKILL.md) - [Eval results](https://hubeiqiao.com/og-video-preview/eval/results.json) - [Full page in Markdown](https://hubeiqiao.com/og-video-preview/index.md) - [MIT license](https://github.com/hubeiqiao/og-video-preview/blob/main/LICENSE)