Video-Hintergründe, Autoplay und Lazy Loading

Hero-Videos (Video-Hintergründe) sind ein fester Bestandteil aktueller Webdesigns. Sie schaffen Atmosphäre und ziehen im ersten Bildschirm die Aufmerksamkeit auf sich.

Sie gehören aber auch zu den häufigsten Ursachen für einen langsamen First Contentful Paint (FCP) und eine hohe Total Blocking Time (TBT), vor allem wenn das Video über ein Iframe eines Drittanbieters kommt.

Wenn Sie ein normales YouTube-Iframe direkt am Anfang Ihrer Seite einbetten, lädt der Browser den Player, dessen Skripte und Verbindungen zu mehreren Domains, bevor der Nutzer den eigentlichen Inhalt sieht. Für Vimeo gilt dasselbe. Dieser Leitfaden bündelt die Browserregeln, die Player-Parameter, die Techniken für verzögertes Laden und die Anforderungen an Barrierefreiheit, jeweils mit der offiziellen Quelle.

#Wie die Autoplay-Richtlinien der Browser funktionieren

Zuerst die Regeln. Chrome, Safari und Firefox blockieren Videos, die automatisch mit Ton starten wollen.

Damit Ihr Hintergrundvideo automatisch abspielt, MUSS es diese Attribute haben:

1. autoplay
2. muted (stummgeschaltet)
3. playsinline (entscheidend für iOS)
4. loop

MDN fasst das Kriterium so zusammen: Die Blockade greift nicht bei <video>-Elementen, deren Quelle keine Audiospur hat oder deren Audiospur stummgeschaltet ist; Medien mit aktiver Audiospur gelten als hörbar, und genau sie werden blockiert (MDN, Autoplay-Leitfaden, eigene Übersetzung). Bei einem Hintergrundvideo ist es deshalb sicherer, die Audiospur aus der Datei zu entfernen, als sich nur auf das Attribut muted zu verlassen.

#Was sich mit Chrome 66 und dem Media Engagement Index geändert hat

Chrome wendet die heutige Richtlinie seit Version 66 an, also seit April 2018. Das Chrome-Team fasst die Grundregel in einem Satz zusammen: “Stummes Autoplay ist immer erlaubt” (Chrome for Developers, eigene Übersetzung). Mit Ton startet ein Video nur, wenn der Nutzer bereits mit der Domain interagiert hat (Klick, Tippen), wenn auf dem Desktop die Schwelle des Media Engagement Index (MEI) überschritten ist oder wenn der Nutzer die Website auf dem Smartphone zum Startbildschirm hinzugefügt oder die PWA auf dem Desktop installiert hat.

Der MEI misst, wie stark eine Person auf einer Website Medien konsumiert, berechnet als Verhältnis von Besuchen zu relevanten Wiedergabe-Ereignissen pro Origin. Damit ein Ereignis zählt, verlangt Chrome vier Bedingungen: Wiedergabe länger als sieben Sekunden, Ton vorhanden und nicht stummgeschaltet, aktiver Tab und ein Video größer als 200x140 Pixel. Ein stummes Hintergrundvideo sammelt also nie MEI-Punkte. Darauf zu warten, dass Chrome es irgendwann mit Ton abspielt, ist sinnlos.

#Was iOS seit iOS 10 verlangt

WebKit hat die Regeln für Safari auf iOS im Juli 2016 veröffentlicht, im Beitrag von Jer Noble zu den neuen Video-Richtlinien. Seit iOS 10 dürfen <video muted>-Elemente ohne Nutzergeste automatisch starten, ebenso Videos, deren Quelle keine Audiospur enthält. Mit playsinline läuft das Video auf dem iPhone innerhalb der Seite und wechselt beim Start nicht in den Vollbildmodus (WebKit).

Zwei Verhaltensweisen überraschen alle, die nur am Desktop testen. Bekommt das Video ohne Nutzergeste eine Audiospur oder wird die Stummschaltung aufgehoben, pausiert die Wiedergabe. Und ein <video autoplay> pausiert, sobald es nicht mehr sichtbar ist, zum Beispiel wenn es aus dem Viewport gescrollt wird. Derselbe Beitrag nennt auch die Motivation: GIFs können bis zu zwölfmal so viel Bandbreite und doppelt so viel Energie verbrauchen wie ein moderner Videocodec wie H.264.

#Wie Firefox mit Autoplay umgeht

Firefox folgt derselben Logik, mit Einstellungen, die MDN dokumentiert. media.autoplay.allow-muted steht standardmäßig auf true und lässt stumme Medien abspielen. media.block-autoplay-until-in-foreground, ebenfalls standardmäßig true, verhindert Autoplay in einem Hintergrund-Tab, bis der Nutzer ihn in den Vordergrund holt. Deshalb startet ein Hintergrundvideo auf einer Seite, die per Mittelklick in einem Hintergrund-Tab geöffnet wurde, erst, wenn der Tab aktiv wird.

#Wie Sie erkennen, dass Autoplay fehlgeschlagen ist

Kein Browser garantiert, dass Autoplay stattfindet. Die Methode play() gibt ein Promise zurück, das abgelehnt wird, wenn die Wiedergabe nicht startet. MDN empfiehlt, auf den Fehlernamen NotAllowedError zu prüfen, der eine Blockade aus Berechtigungsgründen anzeigt. Der Chrome-Artikel gibt denselben Rat: Gehen Sie nicht davon aus, dass das Video läuft, und zeigen Sie keinen Pause-Button, wenn die Wiedergabe gar nicht begonnen hat.

const video = document.querySelector('.hero-video');
video.play().catch((error) => {
  if (error.name === 'NotAllowedError') {
    document.querySelector('.hero-play').hidden = false;
  }
});

Es gibt auch navigator.getAutoplayPolicy(), das allowed, allowed-muted oder disallowed zurückgibt. Laut den Kompatibilitätsdaten von MDN (browser-compat-data 8.1.5, Oktober 2026) unterstützt es nur Firefox ab Version 112. Chrome und Safari implementieren es nicht, daher bleibt die Behandlung des Promise der Mechanismus, der überall funktioniert.

#Welche YouTube- und Vimeo-Parameter Sie verwenden sollten

Um die Player-Oberfläche zu entfernen und das Einbettungsvideo wie einen Hintergrund wirken zu lassen, verwenden Sie diese URL-Parameter.

#Vimeo-Parameter background=1 für Hintergrundvideos

Vimeo bietet einen saubereren “Hintergrundmodus” als YouTube.

<iframe src="https://player.vimeo.com/video/12345678?background=1&dnt=1" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

• background=1: blendet die Steuerelemente aus, spielt in Schleife, startet die Wiedergabe und schaltet das Video stumm.
• Tarifbedingung: Laut der Parameter-Seite von Vimeo muss das Video in einem Starter-, Standard-, Advanced-, Plus-, Pro-, Business-, Premium- oder Enterprise-Konto liegen. In einem kostenlosen Konto funktioniert background=1 nicht.
• dnt=1: verhindert, dass der Player Sitzungsdaten und Analytics erfasst, ähnlich wie Do Not Track, wobei einige essenzielle Cookies aktiv bleiben (Vimeo Help Center).

#YouTube-Parameter für Hintergrundvideos

YouTube ist komplizierter. Den Player können Sie nicht vollständig ausblenden, aber die Oberfläche reduzieren.

<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID?autoplay=1&mute=1&controls=0&loop=1&playlist=VIDEO_ID&playsinline=1" frameborder="0" allow="autoplay; encrypted-media"></iframe>

• Entscheidend: Damit loop=1 mit einem einzelnen Video funktioniert, verlangt die Google-Dokumentation, playlist auf DIESELBE Video-ID zu setzen. Sonst stoppt das Video nach dem ersten Durchlauf. Dieselbe Seite weist darauf hin, dass loop in Iframe-Embeds nur eingeschränkt unterstützt wird.
• playsinline=1: steuert, ob das Video auf iOS in der Seite oder im Vollbild läuft. Laut Dokumentation ist Vollbild derzeit der Standardwert, für einen Hintergrund ist der Parameter also Pflicht.
• mute=1 steht nicht in der offiziellen Parameterliste. Er wird in der Praxis genutzt, ist aber kein dokumentierter Vertrag. Wenn die Stummschaltung garantiert sein muss, nutzen Sie die IFrame Player API und rufen mute() vor playVideo() auf.
• modestbranding ist veraltet und wirkungslos. Seit dem 25. September 2018 lassen sich ähnliche Videos nicht mehr abschalten: rel=0 beschränkt sie nur auf denselben Kanal (YouTube IFrame Player API).

Die Dokumentation ergänzt einen Punkt, der für die DSGVO zählt: Mit autoplay=1 erfolgt die Erfassung und Weitergabe von Wiedergabedaten bereits beim Laden der Seite, ohne Interaktion des Nutzers.

#Wie Sie die Autoplay-Berechtigung an ein Iframe delegieren

Chrome erlaubt einer Origin mit Autoplay-Berechtigung, diese über das Attribut allow="autoplay" an Iframes anderer Origins weiterzugeben. Iframes derselben Origin dürfen standardmäßig automatisch abspielen. Auf Serverseite legt der Header Permissions-Policy mit der Direktive autoplay fest, welche Domains Medien automatisch abspielen dürfen. Der Standardwert ist self. Eine leere Liste schaltet Autoplay komplett ab, und Sie können konkrete Origins durch Leerzeichen getrennt angeben.

Permissions-Policy: autoplay=(self "https://player.vimeo.com")

Wenn Ihre Website aus Sicherheitsgründen bereits eine restriktive Permissions-Policy sendet, prüfen Sie, ob sie den Player nicht versehentlich blockiert.

#Wie Sie Videos mit einer Fassade laden

Ein Iframe sofort zu laden, schadet den Core Web Vitals. Es verzögert zu laden, ist besser. Eine Fassade ist am besten.

Eine Fassade ist ein leichtes Bild, das aussieht wie der Video-Player. Wenn der Nutzer interagiert, wird das Bild gegen das echte Iframe getauscht. Beachten Sie die Grenze: Eine Fassade braucht einen Klick, sie eignet sich also für inhaltliche Videos und nicht für einen Hintergrund, der sich von selbst bewegen soll. Für einen echten Hintergrund ist das Gegenstück das poster mit einem selbst gehosteten Video.

#YouTube-Embed mit lite-youtube als Fassade laden

Die verbreitetste Referenz ist lite-youtube-embed von Paul Irish. Die README verspricht, dass das Element “genau wie das Original dargestellt wird, aber etwa 224-mal schneller” (eigene Übersetzung).

<link rel="stylesheet" href="/vendor/lite-yt-embed.css">
<script src="/vendor/lite-yt-embed.js"></script>
<lite-youtube videoid="goiWrNiaT0I" playlabel="Play: Crayon Physics Deluxe - Trailer HD"></lite-youtube>

Das Element zeigt das Vorschaubild des Videos. Laut Quellcode baut es bei Mauszeiger über dem Element oder bei Fokus vorab Verbindungen (preconnect) zu youtube-nocookie.com und den Google-Domains auf. Beim Klick fügt es das Iframe mit autoplay=1 ein. Die Kommentare im Code nennen eine Ausnahme: Safari am Desktop und die meisten mobilen Browser reichen die Klick-Geste nicht durch die Erzeugung des Iframes weiter, daher lädt die Bibliothek in diesen Fällen zusätzlich die YouTube Player API mit zwei nacheinander geladenen JS-Dateien.

#Videos unterhalb des Folds mit IntersectionObserver laden

Wenn das Video automatisch (ohne Klick) starten soll, Sie es aber erst laden wollen, wenn es sichtbar ist (z. B. ein Video in der Mitte der Seite):

document.addEventListener("DOMContentLoaded", function() {
  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));

  if ("IntersectionObserver" in window) {
    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(video) {
        if (video.isIntersecting) {
          for (var source in video.target.children) {
            var videoSource = video.target.children[source];
            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
              videoSource.src = videoSource.dataset.src;
            }
          }

          video.target.load();
          video.target.classList.remove("lazy");
          lazyVideoObserver.unobserve(video.target);
        }
      });
    });

    lazyVideos.forEach(function(lazyVideo) {
      lazyVideoObserver.observe(lazyVideo);
    });
  }
});

Dieses Muster legt die echte URL in data-src jedes <source> ab und kopiert sie erst nach src, wenn das Video in den Viewport kommt. Der web.dev-Artikel zum Lazy Loading von Videos nutzt dieselbe Idee: Das Video startet nicht standardmäßig, sondern erst, wenn der Intersection Observer es erkennt (web.dev).

#Das Attribut loading=“lazy” am video-Element

MDN dokumentiert loading="lazy" inzwischen auch für <video>: Der Browser verzögert das Laden des Videos einschließlich des Posters, bis das Element eine vom Browser berechnete Entfernung zum Viewport erreicht. Mit autoplay beginnen Download und Wiedergabe erst, wenn das Video in der Nähe oder innerhalb des Viewports ist.

Die Unterstützung ist noch lückenhaft. Die Kompatibilitätsdaten von MDN (8.1.5) markieren das Attribut als experimentell: volle Unterstützung in Chrome und Edge 150, teilweise in den Versionen 148 und 149 (ohne Wirkung auf <source>), keine in Firefox und Safari. Sie können es heute als progressive Verbesserung ergänzen, der IntersectionObserver bleibt für die anderen Browser aber nötig.

#Wie Sie ein Video selbst hosten (MP4/WebM)

Self-Hosting ist manchmal deutlich schneller als YouTube oder Vimeo, weil Sie den Puffer steuern und kein externes JavaScript nötig ist. Keine externen DNS-Lookups, keine Drittanbieter-Skripte.

Tipp: Geben Sie immer ein poster-Bild an. MDN definiert es als das Bild, das angezeigt wird, während das Video lädt. Ohne Poster erscheint nichts, bis der erste Frame verfügbar ist.

<video autoplay muted loop playsinline poster="/images/poster.jpg" width="1280" height="720" class="hero-video">
  <source src="/videos/hero.webm" type="video/webm">
  <source src="/videos/hero.mp4" type="video/mp4">
</video>

Die Attribute width und height erlauben dem Browser, den Platz mit dem richtigen Seitenverhältnis zu reservieren, bevor das Video lädt, genau wie bei Bildern. Mechanismus und typische Fehler beschreibt unser Leitfaden zu Bildgrößen-Fehlern und CLS.

Die Bitrate zählt: Kodieren Sie das Hintergrundvideo mit der niedrigsten Bitrate um, die noch akzeptabel aussieht, und entfernen Sie die Audiospur vollständig. Das spart Bytes und nimmt dem Browser, wie oben beschrieben, jeden Grund, das Video als hörbares Medium zu behandeln.

#Welchen preload-Wert ein Video braucht

Das Attribut preload kennt none (nichts vorladen), metadata (nur Metadaten wie die Länge) und auto (die ganze Datei darf geladen werden). MDN nennt drei Details: Der Standardwert unterscheidet sich je nach Browser, die Spezifikation empfiehlt metadata; das Attribut ist nur ein Hinweis, den der Browser ignorieren darf; und autoplay hat Vorrang vor preload, weil ein Video, das von selbst startet, geladen werden muss.

Für Videos, die nicht automatisch starten, empfiehlt web.dev preload="none" mit einem poster, weil der in den meisten Browsern übliche Standard metadata trotzdem einen Teil der Datei lädt. Bei einem Hintergrundvideo mit autoplay spart preload nichts; wann der Download beginnt, entscheidet das Lazy Loading.

#Wie Sie ein animiertes GIF in MP4 und WebM umwandeln

Wenn das “Hintergrundvideo” in Wahrheit ein GIF ist, bringt der Wechsel den günstigsten Gewinn. Im Beispiel von web.dev belegt derselbe Inhalt 3,7 MB als GIF, 551 KB als MP4 und 341 KB als WebM (web.dev). Die FFmpeg-Befehle aus dem Artikel:

ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

Hat das GIF ungerade Abmessungen, schlägt der Artikel den Filter crop=trunc(iw/2)*2:trunc(ih/2)*2 vor, weil H.264 mit yuv420p gerade Breiten und Höhen verlangt. Im Markup steht die WebM-Quelle zuerst, MP4 dient als Fallback, und das Element trägt autoplay loop muted playsinline.

#Wie ein Hintergrundvideo den LCP beeinflusst

Ein Video oben auf der Seite ist oft das größte sichtbare Element und zählt damit für den Largest Contentful Paint. Laut web.dev gilt für <video>-Elemente die Ladezeit des Poster-Bildes oder der Zeitpunkt, zu dem der erste Frame angezeigt wird, je nachdem, was früher eintritt. Ziel ist ein LCP von 2,5 Sekunden oder weniger, gemessen am 75. Perzentil der Seitenaufrufe, getrennt nach Mobil und Desktop (web.dev).

Die praktische Folge: Das Poster ist Ihr LCP. Verwenden Sie ein leichtes Bild (AVIF oder WebP), sorgen Sie dafür, dass die URL im initialen HTML steht und nicht erst per JavaScript kommt, und laden Sie es mit hoher Priorität vor. Der web.dev-Leitfaden zur LCP-Optimierung teilt die Zeit in vier Teile: TTFB, Verzögerung bis zum Start des Ressourcen-Downloads, Ladedauer und Render-Verzögerung. Ein spät entdecktes Poster verlängert den zweiten Teil, eine schwere Datei den dritten.

<link rel="preload" as="image" href="/images/poster.avif" fetchpriority="high">

Für die übrigen Metriken, einschließlich INP, lesen Sie unseren Leitfaden zu Core Web Vitals und INP.

#Welche Regeln zur Barrierefreiheit für Hintergrundvideos gelten

#WCAG 2.2.2 und der Pause-Button

Das Erfolgskriterium 2.2.2 (Pause, Stop, Hide) hat Stufe A, die Mindeststufe. Es verlangt, dass jede bewegte Information, die (1) automatisch startet, (2) länger als fünf Sekunden dauert und (3) parallel zu anderen Inhalten angezeigt wird, einen Mechanismus hat, mit dem Nutzer sie pausieren, stoppen oder ausblenden können, es sei denn, die Bewegung ist für die Aktivität wesentlich (W3C, Understanding SC 2.2.2, eigene Übersetzung).

Ein Hintergrundvideo in Schleife erfüllt alle drei Bedingungen: Es startet von selbst, dauert länger als fünf Sekunden und liegt hinter Überschrift und Buttons. Die W3C-Seite nennt Hintergrundvideos nicht beim Namen, führt aber Videos und Animationen als bewegte Inhalte auf. In der Praxis heißt die Lösung: ein sichtbarer, per Tastatur erreichbarer Button.

<button type="button" class="hero-toggle" aria-pressed="false">Video pausieren</button>

Hat das Video Ton, gilt zusätzlich Kriterium 1.4.2 (Audio Control), auf das dieselbe Seite für automatisch startendes Audio verweist.

#Wie Sie prefers-reduced-motion respektieren

Die Media Query prefers-reduced-motion erkennt, ob der Nutzer auf seinem Gerät die Option zur Reduzierung nicht notwendiger Bewegung aktiviert hat. Sie kennt no-preference und reduce. MDN erklärt, dass Animationen wie das Skalieren oder Verschieben großer Objekte bei Menschen mit vestibulären Störungen Beschwerden auslösen können. Nutzer aktivieren die Option unter Windows 11 in Einstellungen, Barrierefreiheit, Visuelle Effekte; unter macOS in Bedienungshilfen, Bewegung (Tahoe) oder Bedienungshilfen, Anzeige (bis Sequoia); unter iOS in Bedienungshilfen, Bewegung; unter Android ab Version 9 in Bedienungshilfen, Animationen entfernen.

Bei einem Hintergrundvideo ist die einfachste Antwort, nicht abzuspielen und das Poster stehen zu lassen:

const video = document.querySelector('.hero-video');
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
  video.removeAttribute('autoplay');
  video.pause();
}

Weil das Attribut autoplay die Wiedergabe schon gestartet haben kann, bevor das Skript läuft, ist die robustere Variante, autoplay im HTML wegzulassen und play() nur bei no-preference aufzurufen. So bedient derselbe Code die Regel zur reduzierten Bewegung und die oben beschriebene Behandlung des Promise.

#Was Sie über Hintergrundvideos und Performance mitnehmen sollten

1. Stille ist Pflicht: muted und playsinline in allen Browsern; ohne Audiospur ist es noch besser.
2. Vimeo ?background=1 ist der einfachste Weg zum Hintergrundvideo, setzt aber einen kostenpflichtigen Tarif voraus.
3. YouTube braucht playlist=ID für die Schleife, und mute=1 ist kein dokumentierter Parameter.
4. Behandeln Sie das Promise von play() und zeigen Sie einen Play-Button, wenn Autoplay scheitert.
5. Das Poster ist der LCP: leichtes Bild, im HTML auffindbar, vorgeladen.
6. Nutzen Sie Fassaden (lite-youtube) für Videos mit Klick und IntersectionObserver, um das Laden bis zur Sichtbarkeit aufzuschieben.
7. Pause-Button und prefers-reduced-motion sind nicht optional: WCAG 2.2.2 ist Stufe A.

Lesen Sie auch unseren WordPress-Performance Guide, um die nächsten Schritte zu planen.