Video als Hintergrund nicht nicht responsive 
Author: Dirk B.
Visited 841,
Followers 1,
Shared 0
Hallo,
wenn ich ein Video (mp4) als Hintergrund einfüge, wird es in der Desktop Version richtig angezeigt, passt sich aber nicht auf andere Endgeräte an. Wie kann ich das ändern?
LG Frank
Posted on the
Hallo Frank,
schau mal hier evtl. bringt Dich das weiter.
https://helpcenter.websitex5.com/en/post/185485
Gruß
Andreas
Author
Hallo Andreas,
leider nicht wirklich. Entweder verstehe ich den Inhalt nicht oder ich finde die Lösung nicht, jedenfalls konnte mir der Beitrag nicht weiterhelfen. Sofern sich da eine Lösung versteckt, die ich übersehen habe, kannst Du diese dann hier nochmal auf den Punkt bringen?
LG Frank
Es fragt sich aber "was" nicht stimmen soll, bzw was nicht richtig angezeigt wird. Das sind Hintergrundvideos die sich nur an den Content der Reihe anpassen und nicht an den responsiven Hintergrund. Weil wenn sich das Video anpasst, ist z.B. der Text nicht mehr im Videobereich sondern irgendwo unten in einer anderen Reihe.
Hallo Frank,
mit diesem Code nach dem <body> kannst Du ein Video im Hintergrund einfügen, was sich dem Browserfenster bzw. der mobilen Ansicht anpasst. Das Video speicherst Du im Videoordner auf deinem Server.
<divclass="fullscreen-bg"><videoloopmutedautoplayposter="http://deine Seite mit dem Bild (z.B www.testseite.de/bild.jpg)" class="fullscreen-bg__video">
<sourcesrc="video/big_buck_bunny.webm" type="video/webm">
<sourcesrc="video/big_buck_bunny.mp4" type="video/mp4">
<sourcesrc="video/big_buck_bunny.ogv" type="video/ogg">
</video>
</div>
Mit diesem css-Code (kommt in einer css-Datei in den Ordner css auf deinen Server) funktioniert es:
Zudem wird bei der Fensterbreite von 767 px das Video durch ein Hintergrundbild ersetzt, was gerade bei begrenzten mobilen Datenvolumen hilfreich ist.
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video { height: 300%;
top: -100%;
}
}
@media (max-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 300%;
left: -100%;
}
}
@media (max-width: 767px) {
.fullscreen-bg {
background: url('http://deine Homepage mit dem Bild (z.B www.testseite.de/bild.jpg) ') center center / cover no-repeat;
}
.fullscreen-bg__video {
display: none;
}
}
Author
Hallo Martin,
vielen Dank für diese konkrete Hilfe! Bestens! Hat geklappt!
LG Frank