• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[GELOEST] background-size: cover für Videos?

annsen

Mitglied
Ich möchte gern eine kurze Videosequenz als Hintergrund auf der Startseite laufen lassen. Das funktioniert auch perfekt aber am unteren Rand sitzt mein platzierter "sticky footer" und man kann dann noch weiter runter scrollen - was ich aber nicht möchte. Der Footer soll der letzte Inhalt am unteren Bildschirmrand sein.

Kann ich das Video irgendwie an den Viewport anpassen, so wie das mit Bildern und "background-size: cover;" möglich ist?

Vielen Dank für Tipps/Hinweise!
 
Werbung:
PS: Du schreibst, dass das Video als Hintergrund laufen soll. In dem Fall würde es sich eher anbieten, Gridlayout zu verwenden und damit die Überlappung von Hintergrund-Video und Inhalt zu machen:
Vielen Dank!
Ich hab vergessen zu erwähnen, dass es noch eine Navigation im Kopfbereich gibt.
Mit der oben genannten HTML/CSS-Lösung bin ich nicht zu einem zufriedenstellenden Ergebnis gekommen. Navi und Footer waren unter dem Video und ich konnte weiterhin nach unten scrollen.

Um zu klären ob es eine sinnige Lösung (vielleicht Grid?) gibt, kannst du gern mal auf die Seite schauen.

dcca.de

Da das Video etwas höher als der (mein) Viewport ist, kann ich runterscrollen, so dass der Footer dann etwas hochrutscht. Das möchte ich unterbinden.

Danke (!!) und Gruß

1657760895246.png
 
Ich vermute mal, Du möchtest, dass das Video die Seite komplett unterlagert, einschl. des Footer?
Dann versuche dieses Muster:
Code:
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Video</title>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
            display: grid;
            /* Die Spalte soll die volle Breite und die volle Höhe einnehmen: */
            grid-template-columns: 1fr;
            grid-template-rows: 1fr;
        }

        figure {
            margin: 0;
            overflow: hidden;
        }

        video {
            /* Das Video soll den Platz im Container figure
            vollständig ausfüllen: */
            width: 100%;
            height: 100%;
            min-width: 0;
            min-height: 0;
            object-fit: cover;
        }

        #background-video,
        #main-container {
            /* Beide sollen in der selben Zelle platziert werden: */
            grid-area: 1/1/1/1;
        }

        #main-container {
            display: flex;
            flex-direction: column;

            /* Nur weil mein Testvideo sehr dunkel ist: */
            color: white;
        }

        main {
            flex: 1;
        }
    </style>
</head>

<body>
    <figure id="background-video">
        <video src="videos/test.mp4"></video>
    </figure>
    <div id="main-container">
        <header>
            Hier der Inhalt des Header mit der Navigation
        </header>
        <main>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
            dolore
            magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
            kasd
            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
            sadipscing
            elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
            vero eos et
            accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
            dolor sit
            amet.
        </main>
        <footer>
            Hier der Inhalt des Footers
        </footer>
    </div>
</body>

</html>

Zuerst mal vielen Dank!!

Ich habe das HTML und CSS entsprechend angepasst und die Seite sieht genau so aus, wie sie soll - inklusive Navigation und Footer. Auch wenn ich noch nicht Alles 100%ig verstanden habe...
Das Video hört exakt am unteren Bildschirmrand auf. Kein Scrollen mehr nach unten möglich...

ABER - und dafür habe ich keine Erklkärung, nur eine Vermutung - die Links in Navigation und Footer lassen sich nicht mehr anklicken. Auch ein hover-Effekt gibt es nicht. Liegt das am Video? Überlagert das die anderen Inhalte? Eigentlich war ich der Meinung, dass das Video im Hintergrund ist und Header und Footer liegen über dem Video...

Ich hab auch überlegt, ob ich in der css-Datei irgendwas geändert habe, das den Fehler verursacht aber ich habe nichts gefunden.

Hast du einen Tipp?
 
Werbung:
Zurück
Oben