Ich wette, Sie haben es schon gesehen. Ein Videohintergrund, der das gesamte Browserfenster ausfüllt. Darauf befinden sich Text (daher „Hintergrund“), was ein interessanter Effekt ist, den man nicht jeden Tag sieht. Der größte Grund dafür ist wahrscheinlich, dass man keine Videodatei als background-image in CSS festlegen kann. Man muss ein wenig mit dem Layout tricksen, um das hinzubekommen.
Sicherlich kann ein Vollbild-Videohintergrund auch mal ein bisschen viel sein. Ich würde argumentieren, dass es geschmackvoll umgesetzt werden kann. Ich bin hier nicht besonders an einer Debatte über Designphilosophie interessiert (vielleicht ein anderes Mal), sondern an der Vorgehensweise, wie man es macht, wenn man es braucht, sowie an einigen verschiedenen Mustern, die es annehmen kann.
Es lohnt sich trotzdem, die Grundlagen des guten Geschmacks zu erwähnen
- Kein Ton. Zumindest nicht standardmäßig. Ton, für den man sich entscheidet, ist akzeptabel.
- Respektieren Sie das Datenvolumen. Video ist so ziemlich das Schwerste, was man auf eine Website packen kann, und dies ist ein Video, das die Leute nicht gerade angefordert haben, also seien Sie sich dessen bewusst.
- Bleiben Sie zugänglich. Wahrscheinlich legen Sie Text über das Video, also stellen Sie sicher, dass er genügend Kontrast hat, um lesbar zu sein.
Machen wir es auf die Montana-Art, zu Ehren der Reise, die Media Temple und ich unternehmen, um ZaneRay zu besuchen.
Die Vorgehensweise für Vollbild-Videohintergründe
Wir haben Glück. Dudley Story hat bereits viel Recherche betrieben und ein schönes Setup, das wir verwenden können. Er hat auch eine Demo-Seite.
Wir müssen das Video natürlich auf die Seite bringen, hier ist es also
<video playsinline autoplay muted loop poster="polina.jpg" id="bgvid">
<source src="polina.webm" type="video/webm">
<source src="polina.mp4" type="video/mp4">
</video>Da gibt es viele Attribute! Das poster-Attribut gibt dem Video ein Bild, das angezeigt wird, während das Video lädt oder falls das Video überhaupt nicht geladen wird. Sie möchten vielleicht auch einen background in CSS verwenden.
Das autoplay-Attribut ist vorhanden, weil wir möchten, dass sich das Video automatisch abspielt. Denken Sie daran, dass wir hier geschmackvoll vorgehen, also ist das in Ordnung. Es gibt kein controls-Attribut, also gibt es keine Möglichkeit für den Benutzer, das Video zu starten/stoppen. Das playsinline-Attribut sorgt dafür, dass dies auf iOS funktioniert. Das muted-Attribut ist einfach guter Geschmack (das Video sollte sowieso keinen Ton haben, aber es ist auch auf iOS erforderlich, um das Autoplay zum Laufen zu bringen. Dann sorgt loop dafür, dass es, nun ja, looped.
Um die gesamte Seite mit dem Video abzudecken, können Sie das tun
video {
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}Das sorgt für ein Vollbildvideo! Schön!
Betrachten wir nun einige Muster. Es gibt nur eine Möglichkeit, Vollbildvideos zu handhaben, aber es gibt eine Reihe von Dingen, die wir tun könnten.
Nur ein Viewport
Wir haben das Video platziert. Jetzt können wir alles darauf legen, was wir wollen.
Nehmen wir etwas Text wie diesen
<header class="viewport-header">
<h1>
Explore
<span>Montana</span>
</h1>
</header>Wir können das nach dem Video platzieren und es relativ positionieren, sodass es oben erscheint. Dann wenden wir ein wenig Zentrierung an
.viewport-header {
position: relative;
height: 100vh;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}Wir haben den einfachsten möglichen Effekt
Siehe den Stift
Full Page Video: Basic von Chris Coyier (@chriscoyier)
auf CodePen.
Wir könnten auch andere Elemente, die uns gefallen, irgendwo auf der Seite positionieren. Es ist nicht besonders angesagt, aber wir könnten sogar einen Textbereich einfügen, der unabhängig scrollt, so dass der „Vollbild“-Effekt erhalten bleibt.
Siehe den Stift
Full Page Video: Subscrolling von Chris Coyier (@chriscoyier)
auf CodePen.
Ein Viewport-Header scrollt weg
Das Video kann im Vollbild bleiben und andere Elemente können wegscrollen. Es gibt keinen Grund, warum der Header fixiert bleiben muss! In dieser Demo scrollt der Header-Text (der immer noch genau den Viewport ausfüllt) weg und der Body-Text erscheint, wie Sie es erwarten würden. Er ist sogar leicht transparent, sodass das Video dahinter immer noch sichtbar ist.
Siehe den Stift
Full Page Video: Full Then Scroll von Chris Coyier (@chriscoyier)
auf CodePen.
Ein Viewport-Header, Inhalt scrollt über den Header
Der Header-Text, den wir über dem Video platziert haben, könnte fixiert bleiben, und der Inhalt könnte darüber gleiten. Ein Weg, das zu erreichen, ist, das Video und den Header fix zu positionieren, aber trotzdem sicherzustellen, dass der Hauptinhalt aus dem Viewport geschoben wird, indem man margin-top: 100vh; verwendet.
Siehe den Stift
Full Page Video: Scroll ‘n’ Hide von Chris Coyier (@chriscoyier)
auf CodePen.
Wenn wir das noch ein bisschen weiter treiben, könnten wir bei Scroll-Positionen Opazitäts- und Skalierungsänderungen verdrahten, und der Header-Text könnte beim Scrollen in den Hintergrund überblenden. Das ist mit CSS Custom Properties ganz einfach gemacht! Hier ist diese Demo.
Siehe den Stift
Full Page Video: Scroll ‘n’ Shrink von Chris Coyier (@chriscoyier)
auf CodePen.
Eine Idee, viele Wege!