• 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!
 

Sempervivum

Senior HTML'ler
Ja, das "cover" geht auch für Videos aber dann musst Du object-fit verwenden:

Und wenn ich richtig verstehe, was Du vor hast, müsstest Du das mit dem Footer so einrichten:
HTML:
<body>
    <figure>
        <video src="video.mp4"></video>
    </figure>
    <footer>
        Hier der Inhalt des Footers
    </footer>
</body>
CSS:
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

figure {
    /* Das Element soll den verbliebenen Raum ausfüllen: */
    flex: 1;
}

video {
    /* Das Video soll den Raum in Container figure
    vollständig ausfüllen: */
    width: 100%;
    height: 100%;
    object-fit: cover;
}
ungetestet, aber so sollte es funktionieren.
 
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
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:
 

annsen

Mitglied
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
 

Sempervivum

Senior HTML'ler
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>
 

annsen

Mitglied
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?
 

Sempervivum

Senior HTML'ler
Eigentlich war ich der Meinung, dass das Video im Hintergrund ist und Header und Footer liegen über dem Video...
Der Meinung bin ich allerdings auch und so etwas ist mir noch nie untergekommen. Die einzige Erklärung, die ich habe, ist, dass ein Video normaler Weise bedienbar sein muss und dass die Browser-Entwickler deshalb dem Video Vorrang geben. Diese Vermutung wird auch erhärtet durch die Tatsache, dass das Problem nicht auftritt wenn ich statt des Videos ein Bild nehme.

Die Lösung ist zunächst mal einfach: Das Video für Mouseevents durchlässig machen durch pointer-events: none;:
Code:
        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;
            pointer-events: none;
        }
Allerdings bekommst Du dann ein Problem, wenn das Video auch bedienbar sein soll.
 
Werbung:

Neueste Beiträge

Oben