HTML Hintergrundvideo hinter den anderen Elementen?
Ich habe ein Problem und zwar dass ich ein Hintergrundvideo haben möchte, dass logischerweise auch hinter meinen div's und so ist.
Das Video habe ich bereits und es passt perfekt in den Screen. Nur leider wird es über den anderen Sachen im body angezeigt und ich weiss nicht welchen Code ich brauche, damit das Video hinter den anderen Elementen steht.
Vielen Dank für eure Hilfe!
2 Antworten
Um ein Video in den Hintergrund zu legen, kannst du dieses absolut positionieren und mit einem Z-Index nach hinten verschieben. Sprich dem Eltern-Element ein relative Positionierung zuweist und das darin befindliche Video mit absolut positionierst.
HTML:
<div class="teaser">
<video class="teaser-video" autoplay loop mute>
<source src="path/videoclip.mp4" type="video/mp4">
<source src="path/videoclip.ogg" type="video/ogg">
</video>
<div class="content">
<h2>Title</h2>
<p>Some text here...</p>
</div>
<div>
CSS:
.teaser {
width: 100%;
height: 100vh;
position: relative;
.teaser-video {
width: 100%;
height: 100vh;
object-fit: cover;
position: absolute;
inset: 0;
z-index: 1;
}
.content {
position: relative;
z-index: 10;
}
}
Es geht in erster Linie darum, die Elemente mit position und z-index neu anzuordnen. Wenn das Video dauerhaft zu sehen sein soll, kann auch der body verwendet werden und das Video darin absolut mit z-index positioniert wird.
Du machst es dir halt leichter, wenn du dir ein neues Modul dafür erstellst, sprich ein Container in dem sich alles abspielt. Das kann ein <div> eine <section> oder ein anderes Element sein. Entscheidend ist lediglich dessen Positionierung.
Versuch mal einen geringen oder negativen z-index im CSS des Videos: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Also damit sowas funktioniert muss Hintergrundvideo und andere Elemente in einem div-Element sein?