Hallo,
ich möchte in meinem Header gerne ein full-size Video. Soweit so gut.
Habe jetzt alles so gestaltet wie es aussehen soll.... ABER: Irgendwas stimmt mit meinen Positionierungen nicht... jedenfalls verschwindet der Folgecontent hinter meinem Video und wird nicht einfach daran angehängt. Ich weiß nicht wo es hackt... Kann mir jemand weiterhelfen?
HTML Code:
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<link rel="stylesheet" href="style.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<meta charset="UTF-8">
<meta name="robots" content="index, follow" />
<title>Lorem ipsump</title>
</head>
<body>
<div id="video-container">
<div id="video-content">
<video src="img/Video.mp4" playsinline autoplay muted loop></video>
</div>
<header>
<img src="img/Logo-1.svg" class="Logo">
<img src="img/hamburger.png" class="hamburger">
<h1>SLoremn<br> bopsumm!</h1>
<hr size="4">
<p style="font-size: 2.5em; line-height: 1.5em;"><br> - Lorem ipsum</p>
<img class="Signet" src="img/100-Jahre-Signet.svg">
</header>
</div>
<div class="Einleitungstext">
<img src="img/Berge.svg" class="Berge">
<h2>Lorem ipsum </h2>
<p> blub </p>
</div>
<p>Lorem ipsum</p>
<br>
<br>
<br>
<br>
<p>
</body>
<main>
</main>
</html>CSS
Code
@font-face {
font-family: "Yanone Kaffeesatz";
src: url("fonts/Yanone.ttf");}
@font-face {
font-family: "Lobster";
src: url("fonts/Lobster.otf");}
* {padding: 0;margin: 0;box-sizing: border-box;}
html {max-width:100%; scroll-behavior:smooth;overflow-x: hidden;}
* {
box-sizing: border-box;
}
#video-container {
margin: 0;
background: #3E322D;
background-size: cover;
}
#video-container #video-content video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
#video-container #video-content:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
background: rgba(62,50,45,0.66);
z-index:1;
}
#video-container header {
position: absolute;
width: 100%;
text-align: center;
color: white;
transition: .4s;
z-index: 2;
}
#video-container header img.Logo {
display: inline-block;
float:left;
width: 20%;
margin-left: 5%;
}
#video-container header img.hamburger {
display: inline-block;
float: right;
width: 5%;
margin-right: 7%;
margin-top: 4%;
}
#video-container header img.Signet {
width: 10%;
}
h1 {
font-family: Lobster;
font-size: 4em;
margin-top: 12%;
}
p {font-family: Yanone Kaffeesatz;}
hr {width: 10%; text-align: center;margin: 0 auto; margin-top: 2%; margin-bottom: 2%; background-color: white;}
.Einleitungstext {clear: both;position: relative;}Vielen Dank schonmal!