Hintergrundvideo ganzseitig in Website integrieren – so geht’s

Veröffentlicht am 25.08.2022 von DomainFactory

Hintergrundvideos für moderne Websites kreativ inszeniert – drei Beispiele 

Heute nutzen Website-Betreiber unterschiedlicher Branchen die Vorteile eines Hintergrundvideos für die Startseite. Schauen Sie sich die Beispiele an: 

• Natur: The Hidden World of Nation Parks 
• Musik: nicolaserrera.com 

Der Code für Hintergrundvideos in Websites 

Der Html-Code setzt sich aus dem Code für das Video-Tag und optional weiterem Inhalt zusammen. Die Positionierung erfolgt per CSS-Code. Zusätzlich kann ein per JavaScript gesteuerter Button die Wiedergabe bei Klick pausieren und starten. 

10% Rabatt auf alle DF Produkte

Jetzt 2-Jahre Laufzeit wählen!

Der Html-Code für ein Hintergrundvideo 

Haben Sie das Video hochgeladen – zum Beispiel per FTP-Client oder mithilfe Ihres Content-Management-Systems – fügen Sie den Code in die HTML-Startseiten-Datei ein. Dafür genügen wenigen Codezeilen. 

Für das Video: 

 
<video playsinline autoplay muted loop poster="meinVideo.jpg" id="meinVideo"> 
  <source src="beispiel.mp4" type="video/mp4"> 
</video> 

Erklärung: Das Video startet automatisch und wird wiederholt (gelooped). Das Bild "meinVideo.jpg" wird während des Ladevorgangs angezeigt. „Playsinline“ ist für iOS nötig. 

Optional können Sie über dem Video einen Textbereich mit weiteren Informationen anzeigen: 

 
<div class="content"> 
  <h1>Überschrift</h1> 
  <p>Lorem ipsum...</p> 
  <button id="btn" onclick="btnClick()">Pause</button> 
</div> 

Erklärung: Der optionale Button startet und stoppt das Video per JavaScript. 

Der CSS-Code für Hintergrundvideo, Inhalt und Button 

Im CSS-Code legen Sie nun fest, dass das Hintergrundvideo in voller Breite und Höhe angezeigt wird: 

#meinVideo { 
object-fit: cover; 
width: 100vw; 
height: 100 vh; 
position: fixed; 
top: 0; 
left: 0; 
} 

Für den weiteren Inhalt im unteren Videobereich: 
 

.content { 
  position: fixed; 
  bottom: 0; 
  background: rgba(0, 0, 0, 0.5); 
  color: #f1f1f1; 
  width: 100%; 
  padding: 20px; 
} 
 
Der Play/Pause-Button zum Video: 

#btn{ 
  width: 200px; 
  font-size: 18px; 
  padding: 10px; 
  border: none; 
  background: #000; 
  color: #fff; 
  cursor: pointer; 
} 

JavaScript zum Starten und Pausieren des Hintergrundvideos 

Der optionale Button ist sinnvoll, wenn das Video länger dauert. Die Steuerung erfolgt per JavaScript: 
<script> 
// Video 
var video = document.getElementById("meinVideo"); 
// Button 
var btn = document.getElementById("btn"); 
// Pause/Start des Videos und ändern Button-Text 
function btnClick() { 
  if (video.paused) { 
    video.play(); 
    btn.innerHTML = "Pause"; 
  } else { 
    video.pause(); 
    btn.innerHTML = "Play"; 
  } 
} 
</script> 

Beispiel für Hintergrundvideo mit scrollendem Header und Text 

Es gibt weitere Möglichkeiten, wie Sie ein fixes Hintergrundvideo mit überlagertem Inhalt kombinieren. Ein ansprechender und funktionaler Weg ist ein scrollender Header. 

HTML-Code für Hintergrundvideo mit scrollable Content 

Zuerst der HTML-Code für das Video und den Inhalt: 

<video src="test.mp4" autoplay loop playsinline muted></video> 
<header class="viewport-header"> 
<h1>Entdecke <span>Die Berge</span></h1> 
</header> 
<main> 
  <p>Lorem ip</p> 
</main> 

Der CSS-Code für Hintergrundvideos mit scrollendem Text 

Der CSS-Code für den Effekt ist etwas umfangreicher: 

video { 
  object-fit: cover; 
  width: 100vw; 
  height: 100vh; 
  position: fixed; 
  top: 0; 
  left: 0; 
} 

html, body { 

  height: 100%; 

} 

html { 

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica; 
  font-size: 150%; 
  line-height: 1.4; 
} 
body { 
  margin: 0; 
} 

.viewport-header { 
  position: relative; 
height: 100%; 
  text-align: center; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 

h1 { 
  font-family: 'Syncopate', sans-serif; 
  color: white; 
  text-transform: uppercase; 
  text-align: center; 
  span { 
    display: block; 
    font-size: 10vw; 
   letter-spacing: -1.3vw;  } 
} 

main { 

  background: rgba(black, 0.66); 
  color: white; 
  position: relative; 
  padding: 1rem; 
  p { 
    max-width: 600px; 
    margin: 1rem auto; 
  } 
} 

Weitere Tipps zum Integrieren von Hintergrundvideos mit wenig Ladezeiten 

Das Video soll die Ladezeit so wenig wie möglich verlängern. Folgende Tipps helfen bei der Optimierung: 

• Poster-Image: Geben Sie ein Vorschaubild an, das während des Ladevorgangs angezeigt wird. 
• Videolänge: Das Video sollte in der Regel maximal 30 bis 40 Sekunden lang sein. Besser ist ein wenige Sekunden langes Video, das von neuem startet und wie ein langes Video aussieht. 
• Maximal komprimieren: Video in 720p speichern und eine Framerate von 24 oder 25 Bildern pro Sekunde und geringe Bitraten ausprobieren. 
• Codec: MPEG-4/H.264 ist der empfohlene Codec, den die meisten Browser unterstützen. WebM sollte nach Möglichkeit auch zur Verfügung gestellt werden, es bietet eine bessere Videoqualität bei geringer Dateigröße. 

Tipp: Probieren Sie verschiedene Kompressionsmöglichkeiten aus und finden Sie den besten Kompromiss aus akzeptabler Videoqualität und geringer Dateigröße. Durch die automatische Wiederholung (Loop) wirken Videos länger. 

Hintergrundvideo in die Website integrieren - Zusammenfassung 

Hintergrundvideos sind ein modernes Stilmittel für Websites und binden die Aufmerksamkeit der Seitenbesucher. Kommunizieren Sie mit solch einem Video zum Beispiel die Philosophie Ihres Unternehmens, bewerben Sie ein Produkt oder eine Dienstleistung. Nutzen Sie die Vorteile und werten Sie Ihr Website-Design auf! 

Titelmotiv: Pixabay