Ein Hintergrundvideo lässt sich auf einer Webseite mittels HTML und CSS integrieren. Dafür wird das `<video>`-Element in das HTML-Dokument eingefügt und anschließend mit CSS entsprechend gestaltet. Folgendes Beispiel veranschaulicht die grundlegende Vorgehensweise:
HTML-Struktur
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/styles.css">
<title>Video Hintergrund</title>
</head>
<body>
<div class="video-container">
<video autoplay loop muted playsinline>
<source src="/pfad-zum-video.mp4" type="video/mp4">
Ihr Browser unterstützt das Video-Tag nicht.
</video>
<h2>Ihr Werbespruch hier!</h2>
</div>
</body>
</html>CSS-Stil
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.video-container {
position: relative;
width: 100%;
height: 100vh; /* viewport height */
overflow: hidden;
}
video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
z-index: -1;
}
h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}In dem beschriebenen Beispiel wird ein Video als Hintergrund auf der ganzen Webseite wiedergegeben, während ein Slogan oder Werbespruch in einem `h2`-Element darüber eingeblendet wird. Für die Video-Wiedergabe sind die Attribute `autoplay`, `loop`, `muted` und `playsinline` gesetzt, damit das Video ohne Benutzerinteraktion in Endlosschleife läuft, keinen Ton ausgibt und optimierte Ladezeiten bietet.
Der Platzhalter "pfad-zum-video.mp4" sollte durch den konkreten Pfad des Videos ersetzt werden. Es ist empfehlenswert, das Video in einem webfreundlichen Format und einer angepassten Größe bereitzustellen, um schnelle Ladezeiten zu gewährleisten.
Beim Einbetten von Videos in Webseiten ist es wichtig, ein Format zu wählen, das von den meisten Webbrowsern unterstützt wird und eine gute Balance zwischen Qualität und Dateigröße bietet. Hier sind die gängigsten Videoformate für Webseiten:
Videoformate
MP4 (mit H.264 Video Codec und AAC Audio Codec):
- Dies ist das am weitesten verbreitete Format mit breiter Kompatibilität über alle modernen Browser hinweg.
- MP4 bietet eine hohe Kompressionsrate, was kleinere Dateigrößen bei guter Qualität ermöglicht.
WebM:
- Ein offenes, lizenzfreies Format, das speziell für das Web entwickelt wurde.
- Es bietet eine ähnliche Qualität wie MP4, ist jedoch oft in kleineren Dateigrößen verfügbar.
Ogg (mit Theora Video Codec und Vorbis Audio Codec):
- Weniger verbreitet als MP4 und WebM, aber als Fallback-Option nützlich.
- Ogg wird von mehreren Browsern unterstützt, insbesondere von solchen, die Open-Source-Formate bevorzugen.
Videogröße und Qualität
Auflösung
- Eine Auflösung von 720p (1280x720) ist für die meisten Hintergrundvideos ausreichend und bietet einen guten Kompromiss zwischen Qualität und Dateigröße.
- Für größere Bildschirme oder spezielle Designanforderungen kann auch 1080p (1920x1080) in Betracht gezogen werden, was jedoch zu einer größeren Dateigröße führt.
Bitrate
- Eine Auflösung von 720p (1280x720) ist für die meisten Hintergrundvideos ausreichend und bietet einen guten Kompromiss zwischen Qualität und Dateigröße.
- Für größere Bildschirme oder spezielle Designanforderungen kann auch 1080p (1920x1080) in Betracht gezogen werden, was jedoch zu einer größeren Dateigröße führt.
Dateigröße
- Für Hintergrundvideos ist es ratsam, eine Dateigröße von weniger als 5 MB anzustreben, um die Ladezeiten nicht negativ zu beeinflussen.
- Videos sollten vorausgeladen oder über CDN (Content Delivery Network) ausgeliefert werden, um die Belastung für den eigenen Server zu minimieren und die Ladezeiten zu verbessern.
Für maximale Kompatibilität und Performance sollte das Video im MP4-Format mit einer Auflösung von 720p vorliegen und eine Größe von unter 5 MB haben. WebM kann als alternatives Format bereitgestellt werden, um die Unterstützung für alle Benutzer zu gewährleisten. Beim Encoding des Videos sollte auf eine angemessene Bitrate geachtet werden, die eine gute Qualität ohne unnötig große Dateien ermöglicht.
Schritt für Schritt Erklärung
HTML-Struktur
<video>-Element:
- Mit dem <video>-Element können Sie Videos in Ihre Webseite einbinden.
- Die Attribute `autoplay`, `loop` und `muted` sorgen dafür, dass das Video automatisch abgespielt wird, sich wiederholt und ohne Ton abgespielt wird.
- `playsinline` verbessert die Performance, indem es das Video im Hintergrund lädt.
- Innerhalb des <video>-Elements verwenden Sie das `<source>`-Element, um den Pfad zum Video und dessen Typ anzugeben.
<h2>-Element:
Dieses Element enthält Ihren Slogan oder Werbespruch.
CSS-Stil
Allgemeine Stile:
`body, html`: Diese Selektoren zielen auf das gesamte Dokument und den Körper der Webseite ab. Sie setzen die Höhe auf 100% und den Rand auf 0, um sicherzustellen, dass es keine unerwünschten Abstände gibt.
`.video-container`:
- Dies ist ein Container, der das Video und den Slogan umschließt.
- `position: relative;`: Dies ermöglicht es Ihnen, absolute positionierte Kind-Elemente relativ zu diesem Container zu positionieren.
- `width: 100%;` und `height: 100vh;`: Der Container nimmt die volle Breite und Höhe des Viewports ein.
- `overflow: hidden;`: Dies verhindert, dass Inhalte, die größer sind als der Container, sichtbar sind.
`video`:
- `position: absolute;`: Das Video wird absolut positioniert, was bedeutet, dass es sich relativ zum nächstgelegenen positionierten Vorfahren (in diesem Fall `.video-container`) positioniert.
- `top: 50%;` und `left: 50%;`: Das Video wird so positioniert, dass sein Mittelpunkt in der Mitte des Containers liegt.
- `min-width: 100%;` und `min-height: 100%;`: Das Video wird mindestens so groß wie der Container, wodurch sichergestellt wird, dass der gesamte Bildschirm abgedeckt ist.
- `transform: translate(-50%, -50%);`: Dies verschiebt das Video zurück, so dass sein Mittelpunkt genau in der Mitte des Containers liegt.
- `z-index: -1;`: Das Video wird hinter anderen Inhalten angezeigt, so dass der Slogan darüber sichtbar ist.
`h2`:
- Dieser Stil positioniert den Slogan oder Werbespruch in der Mitte des Bildschirms.
- `position: absolute;`, `top: 50%;`, `left: 50%;` und `transform: translate(-50%, -50%);`: Diese Eigenschaften zentrieren den Slogan sowohl horizontal als auch vertikal im Container.
- `color: white;`: Der Slogan wird in weißer Farbe angezeigt.
- `text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);`: Ein leichter Schatten wird dem Text hinzugefügt, um die Lesbarkeit gegenüber dem Hintergrundvideo zu verbessern.
Durch diese Kombination von HTML und CSS wird das Video im Hintergrund der Webseite abgespielt, während der Slogan oder Werbespruch darüber angezeigt wird.