Webdesign lernen CSS · Video

Video im Header erstellen.

Ein einfaches Beispiel, wie du ein Video als Hintergrund im Header deiner Webseite einsetzt und für Mobilgeräte ein statisches Bild anzeigst – mit PHP, HTML5 und CSS.

Von Eduard Wischnewski, Webdesigner · aktualisiert am

Header mit Video und Bild

HTML & PHP: Header mit Video und Bild für Mobile

Hier siehst du den PHP-Code, der basierend auf dem Gerät den Video-Header oder einen Bild-Hintergrund ausgibt.

php
<?php
function isMobile() {
    return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}
?>
<?php if (isMobile()) { ?>
<section class="hero" id="headoben" style="background:url('/background.jpg'); background-position:center; background-size:cover;">
    <div class="header-text">
        <h1>Slogan</h1>
        <p>Text</p>
    </div>
</section>
<?php } else { ?>
<section class="header">
    <video playsinline autoplay muted loop>
        <source src="/video.mp4" type="video/mp4">
        <track src="/video.vtt" kind="captions" srclang="de" label="video_header">
    </video>
    <div class="header-text">
        <h1>Slogan</h1>
        <p>Text</p>
    </div>
</section>
<?php } ?>

CSS für Video-Hintergrund und Text-Overlay

Das passende CSS sorgt dafür, dass das Video den kompletten Header ausfüllt und der Text darüber gut sichtbar bleibt.

css
section.header, section.hero {
  position: relative;
  width: 100%;
  height: 60vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}
section.header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 1;
  object-fit: cover;
}
.header-text {
  position: relative;
  z-index: 2;
  padding: 0 20px;
  max-width: 800px;
  text-shadow: 0 0 10px rgba(0,0,0,0.7);
}
@media (max-width: 768px) {
  section.header {
    display: none; /* Video im Header auf Mobil verbergen */
  }
  section.hero {
    height: 50vh; /* evtl Höhe für Mobil anpassen */
  }
}

Schritt-für-Schritt-Erklärung

  • isMobile(): PHP-Funktion prüft anhand des User Agents, ob es ein mobiles Gerät ist.
  • Header-Ausgabe: Mobile Geräte bekommen einen section.hero mit Hintergrundbild, Desktop-Geräte einen section.header mit Video-Tag.
  • Video-Tag: Mit autoplay, muted, loop und playsinline für beste Kompatibilität und Optik.
  • CSS Styling: Das Video wird absolut positioniert und füllt mit object-fit: cover das gesamte Headerfeld aus.
  • Text-Overlay: Text steht über dem Video/Bild mit Schatten für gute Lesbarkeit.

Ohne PHP: Poster-Bild und mehrere Formate

Wenn deine Seite statisch ist oder du keinen User-Agent-Check willst, geht es auch rein mit HTML. Das poster-Bild erscheint sofort, bis das Video geladen ist, und mehrere <source>-Einträge lassen den Browser das beste Format wählen:

html
<section class="header">
  <video playsinline autoplay muted loop preload="metadata" poster="/background.jpg" aria-hidden="true">
    <source src="/video.webm" type="video/webm">
    <source src="/video.mp4" type="video/mp4">
  </video>
  <div class="header-text">
    <h1>Slogan</h1>
    <p>Text</p>
  </div>
</section>

Kombiniert mit der Media Query oben bekommen Smartphones dann nur das Hintergrundbild zu sehen. Wie du Videos zusätzlich erst bei Bedarf lädst, zeige ich im Tutorial Lazy Loading für Bilder und Videos.

Demo

Malediven

Abendessen

Fazit

Mit dieser einfachen Lösung kannst du deinen Header visuell lebendiger machen, unterstützt mobile Nutzer sinnvoll mit einem Bild und achtest darauf, dass der Text immer gut sichtbar bleibt.

Weiterlernen

Damit das Video die Ladezeit nicht ausbremst, lies Lazy Loading für Bilder und Videos. Eigene Clips erstellst du schnell mit KI in Freepik. Der Text über dem Video wird mit Keyframe-Animationen lebendig, und ein Sticky Header hält die Navigation sichtbar.

Du möchtest einen starken ersten Eindruck mit Video? Ich setze das im Webdesign um – auch mit KI-generierten Videos.

FAQ: Video im Header

Formate, Performance, Mobilgeräte und Barrierefreiheit

Was ist ein Video-Header und warum sollte ich ihn einsetzen?

Ein Video-Header ist ein Video, das im oberen Bereich (Header) einer Webseite als Hintergrund abgespielt wird. Er erzeugt hohe Aufmerksamkeit, unterstützt Storytelling und kann die Markenwirkung stärken (z. B. Produkt in Aktion, Atmosphäre). Nutzen solltest du ihn, wenn das Video Mehrwert liefert und nicht nur Deko ist – bei rein dekorativen Videos sind Performance und Barrierefreiheit besonders wichtig.

Welche Videoformate und Codecs sind empfehlenswert?

Für maximale Kompatibilität empfiehlt sich MP4 (H.264) als primäres Format. Ergänzend ist WebM (VP9/AV1) für moderne Browser sinnvoll, möglichst kurz und gut komprimiert. Stelle mehrere Varianten bereit und nutze <source> im video-Tag, damit der Browser das beste Format wählt. Achte auf eine angemessene Bitrate und Auflösung – für einen Header reicht oft 720p.

Wie verhindere ich lange Ladezeiten und negative Auswirkungen auf die Performance?

Komprimiere Videos, nutze moderne Codecs, halte sie kurz (10–30 Sekunden) und setze passende Bitraten. Verwende ein Poster-Bild (poster-Attribut) als Platzhalter, verzögere das Laden per Lazy Loading oder setze preload="none" für nicht kritische Videos. Nutze ein CDN, aktiviere Caching, liefere kleinere mobile Varianten und teste die Core Web Vitals (LCP/CLS/INP) mit Lighthouse.

Soll das Video auf Mobilgeräten abgespielt werden?

Viele Mobilgeräte blockieren Autoplay oder deaktivieren den Ton, außerdem ist das Datenvolumen zu beachten. Besser ist eine geräteabhängige Lösung: für Mobilgeräte ein statisches Hintergrundbild (Poster) anzeigen oder eine stark reduzierte Version laden. Per PHP-User-Agent-Check, Media Query oder JavaScript-Feature-Detection lässt sich das Verhalten steuern. Fallbacks sind wichtig.

Muss das Video stummgeschaltet sein, damit Autoplay funktioniert?

Ja. Browser erlauben Autoplay nur, wenn das Video stummgeschaltet ist (muted) oder bereits eine Nutzerinteraktion stattgefunden hat. Für Header-Videos gilt daher: autoplay, muted und playsinline verwenden. Inhalte mit Ton sollten erst per Klick starten, niemals automatisch mit Ton.

Wie sorge ich für Barrierefreiheit bei Video-Headern?

Ist das Video rein dekorativ, markiere es mit aria-hidden="true" und biete die Inhalte als Text an (z. B. als Textüberlagerung). Trägt das Video Informationen, biete Untertitel oder ein Transkript an (<track kind="captions">) und eine Möglichkeit, das Video anzuhalten. Achte außerdem auf ausreichenden Kontrast für den überlagerten Text und berücksichtige prefers-reduced-motion.

Wie integriere ich Untertitel?

Untertitel bindest du über <track kind="captions" src="video.vtt" srclang="de" label="Deutsch"> ein. Verwende WebVTT-Dateien für Text und Timing. Wichtige Aussagen sollten zusätzlich als HTML-Text oder Transkript verfügbar sein. Prüfe, ob die Untertitel korrekt synchronisiert und auch im mobilen Fallback zugänglich sind.

Welche rechtlichen Aspekte muss ich beim Einsatz von Videos beachten?

Lizenz- und Urheberrechte sind entscheidend: nur eigene oder korrekt lizenzierte Inhalte verwenden. Bei Personen im Video brauchst du gegebenenfalls deren Einwilligung. Bindest du Videos über Drittplattformen wie YouTube ein, prüfe den Datenschutz nach DSGVO (Einwilligung, Cookie-Banner, Datenschutzhinweis).

Wie binde ich einen Video-Header in WordPress ein?

Lege Video und Poster ins Upload-Verzeichnis, lade benötigte Assets per wp_enqueue_script/wp_enqueue_style und setze das Markup in header.php oder als Template Part ein. Mit get_template_part() und Conditional Tags wie is_front_page() platzierst du den Header gezielt. Für die Performance hostest du Videos idealerweise selbst oder über ein CDN – bei Drittanbietern die DSGVO beachten.

Welche CSS-Techniken sorgen für eine gute, responsive Darstellung?

Positioniere das video-Element absolut mit object-fit: cover, zentriere es mit transform: translate(-50%,-50%) und setze min-width und min-height auf 100 %. Overlays und Text legst du per z-index darüber. Auf Mobilgeräten blendest du den Video-Container per Media Query aus und zeigst das Poster. Achte auf die Höhe (vh) und vermeide Layout-Verschiebungen.

Wie teste und debugge ich Probleme mit dem Video-Header?

Teste in allen gängigen Browsern (Chrome, Safari, Firefox) und auf echten Geräten (iOS/Android). Prüfe die Konsole auf Autoplay- oder CORS-Fehler, kontrolliere die Netzwerkanfragen in den DevTools und die Medien-Header (Content-Type, Accept-Ranges). Teste außerdem ohne Cache und mit gedrosselter Verbindung.

Hat ein Video-Header Auswirkungen auf SEO?

Suchmaschinen werten Hintergrundvideos kaum inhaltlich aus. Wichtige Informationen wie Slogan, H1 und Beschreibung gehören deshalb als HTML-Text auf die Seite. Das Video wirkt eher indirekt über Verweildauer und Nutzererlebnis – solange es die Ladezeit und die Core Web Vitals nicht verschlechtert.

Passt dazu Weitere Tutorials

Weiter lernen.

Lazy Loading Bilder und Videos erst laden, wenn sie sichtbar werden – für kürzere Ladezeiten. Zum Tutorial → Sticky Header erstellen Mit CSS und JavaScript einen Header bauen, der beim Scrollen oben fixiert bleibt. Zum Tutorial → Responsive Webdesign Webseiten, die sich Smartphone, Tablet und Desktop anpassen – Viewport, Media Queries, Flexbox, Grid. Zum Tutorial →

Keine Zeit, es selbst umzusetzen? Ich baue Ihre Webseite schnell und sauber.

Jetzt kontaktieren