Twitter / X video card generator (the HTML version)
X expanded its Card spec to support short MP4 previews. Here's how to generate one per post, automatically, from an HTML template.
Most posts on X still show a static summary_large_image card. The platform supports video cards via the player card type, and when a tweet includes one, the engagement difference is large. Animated previews stand out in the feed.
The catch: video cards are operationally annoying. Twitter wants an iframe-embed for the player, the video has to be hosted, the dimensions are constrained, and most CMSes don't have a path to produce per-tweet video. The path of least resistance is to generate the video in your own pipeline.
The Card spec, briefly
Twitter Cards split video into two flavors:
summary_large_imagewithtwitter:image: still works. The image can be served by your existing OG pipeline.playercard: an iframe URL on your domain that hosts the video player. The player itself is your responsibility.
For most marketing use cases (sharing a blog post, a product update, a launch), the cheaper path is to render an MP4 and ship it as the og:video — most modern Twitter clients pick it up. The player card is overkill unless you need interactivity.
The render path
Same render path as the animated OG image post. One HTML template, server-rendered with per-post variables, run through a deterministic renderer at 1200×630.
The constraints that matter for X specifically:
- Dimensions: 1200×675 (16:9) for the
playercard; 1200×630 still works for the inlineog:video. We default to 1200×630 — it ports to LinkedIn, Discord, Slack, and iMessage too. - Duration: 4-6 seconds. Long enough to read the title; short enough that the loop isn't tiring.
- File size: under 5 MB. h.264 baseline, no audio.
The meta tags
For the inline path:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="/og/{slug}.png" />
<meta property="og:video" content="/og/{slug}.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:width" content="1200" />
<meta property="og:video:height" content="630" />For the player card, add:
<meta name="twitter:card" content="player" />
<meta name="twitter:player" content="https://your.site/embed/{slug}" />
<meta name="twitter:player:stream" content="/og/{slug}.mp4" />
<meta name="twitter:player:width" content="1200" />
<meta name="twitter:player:height" content="675" />The player URL has to be a real page that hosts a <video> tag. A 20-line route in your framework of choice covers it.
Automating the per-post output
The build job emits two artifacts per post:
/og/intro-to-x.png ← rendered at t = end
/og/intro-to-x.mp4 ← 6-second loopThese ship with the post and are referenced from <head>. No per-post design work. The template authors stay in code; the variable inputs (title, subtitle, brand color) come from the post frontmatter.
For a hundred posts, that's a hundred custom X cards generated in a few seconds of build time.
What to put in the card
Three rules:
- The title is the moment. Make it readable from a phone in feed scroll. Big type, generous tracking, one line if you can manage it.
- Branding sits in the corners. Logo top-left, URL bottom-right. Quiet. The eye should land on the title, not the chrome.
- One motion beat, not five. A title slide-in and a settle. Maybe a wipe. Anything more reads as desperate.
The longer "per-post OG video" pipeline is in animated Open Graph images. The "every social size from one source" play is in social media cards every ratio.
A practical note
The reason teams skip animated X cards is operational complexity — hosting, dimensions, transcode, the spec. With an HTML template and a renderer in CI, all of those flatten into a single build step. Once you've done it once, every post you ship for the next year gets one for free.
Cite this postBibTeX · APA · Markdown
@misc{park2026twitter,
author = {Ren Park},
title = {Twitter / X video card generator (the HTML version)},
year = {2026},
url = {https://hyperframes.video/blog/twitter-video-card-generator},
note = {HyperFrames blog}
}Ren Park. (2026, May 19). Twitter / X video card generator (the HTML version). HyperFrames. https://hyperframes.video/blog/twitter-video-card-generator
[Twitter / X video card generator (the HTML version)](https://hyperframes.video/blog/twitter-video-card-generator) — Ren Park, 2026
Ren writes guides, runs workshops, and breaks the CLI on purpose so you do not have to. Previously dev rel at a CI company; before that, an actual filmmaker.
Animated quote cards for Twitter (and other platforms)
A quote-card generator that produces a still PNG and a short animated MP4 from one HTML template. Same source, every social size.
Animated Open Graph images (the practical version)
Most platforms still want a static og:image. A handful — Discord, Telegram, Slack — preview MP4s. Here's how to serve both from one source.
Animated app onboarding screens to MP4
Build an animated app onboarding video in HTML — three-screen carousel with sliding screens, fading headlines, scaling illustrations, advancing dots — and render to MP4.
Building with HyperFrames? Come hang out.
We're on GitHub, in Discord, and the playground is one click away. Bring weird ideas — we collect them.