Heute zeige ich euch einen Weg wie ihr eine Landingpage mit einem responsiven Video Background erstellen könnt.

Wenn ihr ein Video als Hintergrund einbauen möchtet dann solltet ihr schauen dass das Video nicht 100mb ist weil sonst muss der Webseitenbesucher x Tage warten bis das Video abspielt (Nicht alle Menschen haben Glasfaser).

Ebenfalls solltet ihr im Video darauf achten, dass alles im Zentrum des Video abspielt – weil es ist ja responsive eingebaut. Das heisst je kleiner der Browserbereich desto mehr wird links und rechts abgeschnitten…

Viel Spass mit dieser Anleitung

Video

HTML

<div class="container">
        <video src="video.mp4" autoplay loop muted></video>
        <div class="content">
            <h1>hello</h1>
            <a href="#">Weiter</a>
        </div>
    </div>

CSS

.container {
    width: 100%;
    height: 100vh;
    background-color: rgba(135, 10, 192, 0.4); /* overlay */
    display: flex;
    align-items: center;
    justify-content: center;
}

.content {
    text-align: center;
}

.content h1 {
    font-size: 95px;
    color: #fff;
    margin-bottom: 50px;
}

.content a {
    font-size: 23px;
    color: #fff;
    text-decoration: none;
    border: 2px solid #fff;
    padding: 15px 25px;
    border-radius: 50px;
    transition: 300ms;
}

.content a:hover {
    background-color: #fff;
    color: #000;
}

video {
    height: 100vh;
    width: 100vw;
    object-fit: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -999;
}