Using a YouTube video as your loading screen background
Embed the video in a full-screen iframe with autoplay=1&loop=1&playlist=VIDEO_ID&controls=0&modestbranding=1&rel=0&playsinline=1, scale the iframe with the cover technique so there are no black bars, and disable pointer events so players cannot interact with it. Use a video you own, or one whose owner allows embedding.
A YouTube embed is the fastest way to put a trailer behind your loading screen: no encoding, no hosting, and YouTube serves the right quality for each player’s connection. It also comes with rules you do not control — the owner can block embedding, and the player can see YouTube’s own interface if the embed is set up carelessly. Here is how to do it properly.
YouTube vs a self-hosted video
| YouTube embed | Self-hosted WebM | |
|---|---|---|
| Setup | Paste a video ID | Encode and host a file |
| Bandwidth | YouTube’s | Yours |
| Quality per player | Adaptive | One file for everyone |
| Control | Owner can disable embedding; UI may flash | Complete |
| Start time | Player loads, then buffers | Starts from the first frame |
If your trailer is on your own channel, YouTube is a perfectly good choice. If you need frame-perfect control, a WebM file is better — see video backgrounds.
The embed URL
Everything is controlled by URL parameters on the embed address. Replace VIDEO_ID with the part after v= in the normal YouTube link.
<div class="yt">
<iframe
src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=0&loop=1&playlist=VIDEO_ID&controls=0&modestbranding=1&rel=0&playsinline=1&iv_load_policy=3"
allow="autoplay; encrypted-media"
frameborder="0"
title="Background video"></iframe>
</div>| Parameter | What it does |
|---|---|
autoplay=1 | Starts playing immediately |
mute=0 / mute=1 | Sound on or off |
loop=1 + playlist=VIDEO_ID | Loops a single video — loop alone does nothing |
controls=0 | Hides the control bar |
rel=0 | Related videos come only from the same channel |
playsinline=1 | Plays inline rather than full-screen |
iv_load_policy=3 | Hides video annotations |
start=30 | Starts 30 seconds in (optional) |
Filling the screen without black bars
An iframe cannot use object-fit. To make a 16:9 video cover any window, make the iframe at least as large as the window in both directions, keeping 16:9, and centre it. The overflow is cropped.
.yt {
position: fixed; inset: 0;
overflow: hidden;
pointer-events: none; /* nobody can pause or click through */
background: #000;
}
.yt iframe {
position: absolute;
top: 50%; left: 50%;
width: max(100vw, calc(100vh * 16 / 9));
height: max(100vh, calc(100vw * 9 / 16));
transform: translate(-50%, -50%);
}Put your darkening overlay and content in elements after the iframe so they sit on top.
Limits you should know
- Embedding can be disabled by the video owner. The player then shows an error instead of the video. Use videos from your own channel.
- Monetised videos may show ads in embeds. Uploading the trailer to your own un-monetised channel avoids this.
- Region and age restrictions apply. An age-restricted video will not play embedded.
- YouTube’s interface can flash briefly as the player starts. Starting a few seconds in (
start=) and a dark overlay hide most of it. - Music rights still apply: a trailer with a commercial song can be muted or blocked. See music and copyright.
YouTube audio and your music track
A YouTube background brings its own audio. If you also play a music file, players hear both. Either use the video’s audio as your music, or add mute=1 to the embed and play your track separately with a volume control, as described in audio and volume controls.
Common questions
How do I loop a YouTube video in an embed?
Add both loop=1 and playlist=VIDEO_ID (the same ID) to the embed URL. loop=1 on its own does not loop a single video.
Why does my YouTube loading screen show an error?
The video owner may have disabled embedding, or the video is age- or region-restricted. Use a video from your own channel with embedding allowed.
How do I remove the black bars around a YouTube background?
Size the iframe to the larger of the viewport’s width and height at 16:9 and centre it with a transform, inside a container with overflow: hidden.
Can players pause the YouTube video?
Not if you set controls=0 and pointer-events: none on the container. Only enable the cursor if you add your own controls.
Will ads play on my loading screen?
Embeds of monetised videos can show ads. Upload your trailer to your own channel without monetisation to avoid them.
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