Video backgrounds on a FiveM loading screen
Encode the video as WebM with VP9 (or VP8), 1920×1080 at 24–30 fps, no audio track unless you need it, and aim for 10–30 MB. Use <video autoplay muted loop playsinline poster="poster.webp">, host large files on a CDN rather than inside the resource, and always set a poster image so something shows while the video loads.
A cinematic video behind the loading screen is the strongest first impression a server can make — and the most common thing that silently fails. The video tag is simple; the codec, the file size and where you host the file are what decide whether players see your trailer or a black screen. This guide walks through all three.
Codec first: why WebM
FiveM renders the loading screen with its own embedded Chromium. Chromium’s open-source builds do not include proprietary codecs, and H.264 — the codec inside most MP4 files — is one of them. MP4 support in FiveM’s build has varied over the years, which is why the same MP4 plays for some servers and shows black for others. WebM is royalty-free, is decoded by every Chromium build, and is the format that always plays.
| Container / codec | Plays in FiveM | Notes |
|---|---|---|
| WebM / VP9 | Yes | Best quality per MB. The default choice. |
| WebM / VP8 | Yes | Larger files than VP9, very fast to decode. |
| WebM / AV1 | Build-dependent | Smallest files, but decoding cost and support vary; test first. |
| MP4 / H.264 | Unreliable | Convert to WebM. |
| MP4 / H.265 (HEVC) | No | Convert to WebM. |
Encoding with ffmpeg
ffmpeg is free and does this in one command. The -crf value controls quality (lower is better and bigger); -b:v 0 tells VP9 to use pure constant-quality mode.
ffmpeg -i trailer.mp4 \
-vf "scale=1920:-2,fps=30" \
-c:v libvpx-vp9 -crf 32 -b:v 0 -row-mt 1 -deadline good \
-an \
background.webmffmpeg -i trailer.mp4 -vf "scale=1280:-2,fps=30" \
-c:v libvpx-vp9 -crf 36 -b:v 0 -row-mt 1 -an background-720.webmffmpeg -ss 2 -i trailer.mp4 -frames:v 1 -vf "scale=1920:-2" poster.webp-anremoves the audio track. Background videos should usually be silent; music comes from its own file.- CRF 30–34 is the sweet spot for a darkened background you will overlay text on.
- Trim to a seamless 20–60 second loop; a longer file costs more than it adds.
The HTML
<video class="bg" autoplay muted loop playsinline preload="auto" poster="poster.webp">
<source src="https://cdn.example.com/city/background.webm" type="video/webm">
</video>
<div class="shade"></div>.bg {
position: fixed; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
background: #05070d;
}
.shade {
position: fixed; inset: 0;
background: linear-gradient(180deg, rgba(5,7,13,.2), rgba(5,7,13,.75));
}The shade layer darkens the video so text on top stays readable whatever frame is showing. The poster displays instantly and remains if the video fails, so the screen is never empty.
File size and where to host it
A loading screen can reference files inside its resource or on the web. Files inside the resource are downloaded by the client as part of that resource, and the loadscreen resource is fetched first — so a 150 MB video inside it is 150 MB every new player waits for before anything appears.
| Option | Good for | Watch out for |
|---|---|---|
Inside the resource (files {}) | Small posters, logos, fonts | Big videos delay the whole loading screen |
| Your own CDN / object storage | Videos and music | Must be HTTPS and a direct file URL |
| A hosted loading screen service | Everything, with no hosting work | Choose one that serves media from a CDN |
Keeping it smooth
- The loading screen shares the PC with a game that is loading hundreds of megabytes; a 4K 60 fps video can stutter the whole machine. 1080p at 24–30 fps is plenty behind a darkened overlay.
- Avoid stacking a video with heavy CSS effects such as large blurs; they multiply the GPU cost.
- Do not use
backdrop-filter— it is not reliably supported in FiveM’s Chromium, as covered in CEF limitations.
When the video does not play
| Symptom | Cause | Fix |
|---|---|---|
| Black screen, audio plays | H.264/HEVC video in an MP4 | Re-encode to WebM VP9. |
| Poster shows, video never starts | Wrong URL, non-direct link or blocked host | Open the URL in a browser tab; it must play on its own. |
| Loading screen appears very late | Huge video inside the resource | Host it on a CDN or shrink it. |
| Video stutters | Too heavy for the machine while the game loads | Drop to 1080p/30 fps and raise CRF. |
| Works in browser, not in game | Codec or http:// URL | Use WebM over HTTPS. |
If you would rather use a YouTube video, that is a different set of trade-offs — see YouTube backgrounds.
Common questions
Why does my loading screen video not play in FiveM?
Most often it is an H.264 MP4. FiveM’s Chromium plays WebM (VP9/VP8) reliably, so re-encode the video to WebM. Also check the URL is a direct HTTPS link to the file.
What is the best video format for a FiveM loading screen?
WebM with the VP9 codec at 1920×1080, 24–30 fps, with no audio track and a total size of roughly 10–30 MB.
How do I convert MP4 to WebM?
With ffmpeg: ffmpeg -i in.mp4 -c:v libvpx-vp9 -crf 32 -b:v 0 -an out.webm. Lower the CRF for higher quality or raise it for a smaller file.
Should the background video have sound?
Usually no. Keep the video silent and play music from a separate MP3, so you can control and mute the music without touching the video.
How big can the video file be?
There is no hard limit, but every joining player downloads it. Keep it around 10–30 MB and host it on a CDN rather than inside the resource.
Want a loading screen you never have to debug?
Build it in the browser, export once, and edit it whenever — no HTML, no re-uploads.
Start free