Common problem for motion designers and video editors starting with websites: “I made a beautiful animation in Adobe After Effects, rendered to .mov (in best quality!), uploaded to WordPress… and nothing. Black screen, error, or the file weighs 500 MB and loads for an hour.”
Why does this happen? Because the internet operates by different rules than film post-production.
The problem with .MOV files
The .mov format (QuickTime container) is standard in creative work, especially on Macs. It often uses ProRes codec or uncompressed video. Great for archiving and further editing, but terrible for web browsers.
- No support: Not all browsers (especially on Windows/Android) natively play QuickTime codecs.
- Size: A ProRes file can weigh 1 GB per minute. On the internet, we aim for 5-10 MB.
Html5 standard: MP4 (h.264) and WebM
For video to work on 99.9% of devices (from iPhone to Android fridge), you need to use web standards.
1. MP4 with h.264 codec (avc)
This is the “gold standard”. The safest choice.
- Works everywhere.
- Good quality at small size.
- How to do it: In Adobe Media Encoder, choose H.264 format (not QuickTime!). Preset “YouTube 1080p Full HD” or “Match Source - High Bitrate” is a good start.
2. WebM with vp9 codec (or av1)
Open format developed by Google.
- Often 30-50% smaller than MP4 at the same quality.
- Ideal for modern browsers (Chrome, Firefox).
”Video tag” strategy IN html5
Best practice (if you must host video yourself, e.g., as Hero section background) is to provide both formats. The browser will choose whichever it prefers.
<video autoplay loop muted playsinline poster="thumbnail.jpg">
<source src="animation.webm" type="video/webm">
<source src="animation.mp4" type="video/mp4">
Your browser doesn't support video.
</video>Note the attributes:
muted: Mobile browsers require muting to allow autoplay.playsinline: Required on iOS (iPhone) so video doesn’t immediately open fullscreen.
Or maybe YouTube / vimeo?
If your video has sound, lasts longer than 30 seconds, and is content (e.g., vlog, interview), don’t upload it to WordPress. Use YouTube or Vimeo.
- You save server bandwidth.
- These platforms automatically adjust quality to user’s connection (adaptive streaming). WordPress can’t do this – it will try to download the entire large file, stuttering on weak LTE.
Workflow summary
- Work in After Effects/Premiere on high-quality files (
.mov). - Export for web through Adobe Media Encoder as H.264 (.mp4).
- If you want to be pro: convert a copy to WebM (e.g., free HandBrake program).
- When uploading to WordPress media library, make sure the file is under 10-20 MB. If more -> YouTube.
