Hero Video - Full Size Video
Einbindung
Ein Hero Video bzw. Full Size Video ist ein großes Video - oftmals mit einem Text, welches am Anfang einer Webseite eingefügt wird.
Die Höhe des Hero Video können Sie mit der relativen Maßeinheit vh (Viewport Height) festlegen.
Diese Maßeinheit bezieht sich auf die Höhe des Browserfensters.
HTML - Body
Fügen Sie den folgenden Code in den gewünschten Bereich der HTML-Seite ein.
CSS
Ergänzen Sie die vorhandene CSS-Datei mit den folgenden Stylesheet-Definitionen.
/* Das Hero Video */
.hero-video {
/* Mit "linear-gradient" wird das Hintergrund-Video (videos/seifenblase.mp4) abgedunkelt, damit der Text leichter lesbar ist */
background-image: linear-gradient(rgba(0, 0, 0, 0.3),
rgba(0, 0, 0, 0.3));
position: relative;
display: flex;
justify-content: center;
/* Höhe des Hero-Videos festlegen */
height: 100vh; /* 50vh macht das Hero-Video nur halb so hoch */
overflow: hidden;
}
/* Ausrichtung und Zentrierung des Videos, damit es auf allen Bildschirmen gut aussieht */
.hero-video-bg {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
object-fit: cover;
z-index: -1;
}
/* Platziert einen Text in der Mitte des Bildes (optional) */
.hero-video-text {
color: white;
text-align: center;
align-self: center;
z-index: 2;
}
.hero-video-text button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: #000;
background-color: #ddd;
text-align: center;
cursor: pointer;
}
.hero-video-text button:hover {
background-color: #555;
color: #fff;
}