Unzip
the banner.
Extract the banner package to a folder. Keep index.html next to its images, scripts and fonts.
HTML5 BANNER TO VIDEO
Convert HTML5 banners
to MP4 video.
Turn animated HTML5 ads from Adobe Animate, Google Web Designer or hand-coded GSAP into MP4 video for social media, video ads and client previews, at the exact banner size.
How to convert an HTML5 banner to MP4
Unzip
Open
index.html.
Import the HTML file. Adobe Animate (CreateJS) canvas, Google Web Designer and GSAP banners render as they do in the browser.
Use the
banner size.
Set a custom size such as 300 × 250, 728 × 90 or 1080 × 1080, and the length of the banner or of several loops.
Export
the MP4.
Render H.264 MP4 for social and video ads. Use 2× the size for a sharper upload.
Common sizes to export
| Placement | Size | Tip |
|---|---|---|
| Medium rectangle | 300 × 250 | Export at 600 × 500 for sharper playback |
| Leaderboard | 728 × 90 | Keep text large; it is very short |
| Social feed | 1080 × 1080 or 1080 × 1350 | Rebuild the layout square for feeds |
| Stories and reels | 1080 × 1920 | Vertical 9:16 with safe margins |
Tips for banner videos
- Remove click and hover states. Video has no clicks. Make sure the animation plays by itself from the first frame.
- Watch the loop count. Banners often stop after three loops. Set the video length to match, or remove the limit.
- Add a voiceover or music. Drop audio onto the timeline for video ad placements.
- Check the last frame. End on the call to action, since many players hold the final frame.
HTML5 banner to MP4 questions
Does it work with Adobe Animate HTML5 Canvas banners?
Yes. Animate exports a CreateJS canvas animation driven by a ticker. The studio replays it on its own fixed clock and captures every frame.
Can I convert Google Web Designer banners?
Yes. Open the published index.html with its assets. CSS and JavaScript animations render as they do in Chrome.
Can I batch-convert many banner sizes?
You can add several HTML files to the project and render them one after another, each with its own size and length.
Will the MP4 look blurry?
Not if you render at twice the banner size. The studio renders at the size you choose, not at screen size.
More ways to make video from code
Try it free for 7 days.
Free download from the Microsoft Store. No payment card needed for the trial.