Using a YouTube video as your loading screen background

#YouTube vs a self-hosted video

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>

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