# Video backgrounds on a FiveM loading screen

> Add a video background to a FiveM loading screen that actually plays: why WebM (VP9/VP8) beats MP4, the exact ffmpeg commands, resolution and bitrate targets, where to host the file, and how to fall back to a poster image.

Source: https://fam-tools.com/guides/fivem-loading-screen-video-background · FAM Tools · published 2026-09-11 · updated 2026-09-11 · about 12 min

**Short answer.** 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.

## Key points

- **WebM (VP9/VP8)** plays in every FiveM client build; H.264 MP4 has not been reliable.
- Encode with `ffmpeg -c:v libvpx-vp9 -crf 32 -b:v 0` for good quality at a small size.
- Keep it **10–30 MB**: every joining player downloads it.
- Always add a **poster** image and a dark background colour.
- Put music in a separate audio file so you can control volume independently.

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.

*MP4 → WebM (VP9), 1080p, no audio*

```bash
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.webm
```

*A lighter 720p version for weak connections*

```bash
ffmpeg -i trailer.mp4 -vf "scale=1280:-2,fps=30" \
  -c:v libvpx-vp9 -crf 36 -b:v 0 -row-mt 1 -an background-720.webm
```

*A poster frame from the same video*

```bash
ffmpeg -ss 2 -i trailer.mp4 -frames:v 1 -vf "scale=1920:-2" poster.webp
```

- `-an` removes 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

*index.html*

```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>
```

*style.css*

```css
.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 |

> **Do not use cloud-drive share links** — Google Drive, Dropbox and OneDrive share links return an HTML page, not the video, so nothing plays. The URL must end in the file and play on its own in a browser tab.

## 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](https://fam-tools.com/guides/fivem-nui-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](https://fam-tools.com/guides/fivem-loading-screen-youtube-background).

## 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.

## Related

- https://fam-tools.com/guides/fivem-loading-screen-youtube-background
- https://fam-tools.com/guides/fivem-loading-screen-performance
- https://fam-tools.com/guides/fivem-loading-screen-audio-volume-controls
- https://fam-tools.com/guides/fivem-image-sizes-assets-guide