'Text in front of looped video

I have a looped video with this css code

.bg video{
position: absolute;
top: 80px;
left: 0;
width: 100%;
height: 91.4%;
object-fit: cover;

This is the HTML code

<div class="bg">
        <video src="videos/S22-Ultra-unboxing.mp4" muted loop autoplay></video>
        <p>New S22 Ultra</p>
</div>

I want to have the "New S22 Ultra" in front of the video. And always when I try, the text is all the way in the top right corner. If you don't understand what I mean I can always send you the whole file.

htmlcss


Solution 1:[1]

  • Make your .bg set to position: relative; in order to
  • place your <p> text with elevated z-index: 1; and position: absolute
  • Set top and right properties for your <p> text as desired.
  • Would be simpler for you to place that <p> inside a <div> instead

.bg {
  position: relative;
  background: #000;
  height: 80vh;
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bg-text {
  position: absolute;
  z-index: 1; /* not necessary if order in HTML is appropriate */
  right: 20px;
  top: 20px;
  color: #ddd;
}
<div class="bg">
  <video class="bg-video" src="https://r.myxotod.de/codepen.io/ambilight/sports.mp4" muted loop autoplay></video>
  <div class="bg-text">New S22 Ultra</div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions