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.
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
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.
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.heromit Hintergrundbild, Desktop-Geräte einensection.headermit Video-Tag. - Video-Tag: Mit
autoplay,muted,loopundplaysinlinefür beste Kompatibilität und Optik. - CSS Styling: Video wird absolut positioniert und mit
object-fit: coverdas gesamte Headerfeld ausfüllt. - Text-Overlay: Text steht über dem Video/Bild mit Schatten für gute Lesbarkeit.
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.
Demo
Malediven
Abendessen