Video contained in div always appears above everything else (CSS+HTML)

neilando
March 11, 2024
169 views
3 votes
3 Answers

Im having trouble overlapping a video element. I have a div that contains a video. even though i have specified that the following div below it should be higher using z-index, and thus appear above the video, it always appears below it. Im not sure what is wrong?

<style>

body{
    margin:0;
}

.video-container {
    z-index: 0;
    width: 100%;
    height:600px;
    position: relative;
}

.video-container video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  z-index: 1;
}

.video-container .caption {
  z-index: 2;
  position: relative;
  text-align: center;
  color: #dc0000;
  padding: 10px;
}

#content {
    z-index: 3;
    background-color:#0F6;
    padding:100px;
    margin: -100px 20% 100px 20%;
}

</style>
</head>

<body>

<div class="video-container">
    <video autoplay muted loop>
        <source src="Westgress Video.mp4" type="video/mp4" />
    </video>
    <div class="caption">
      <h2>Your caption here</h2>
    </div>
</div>



<div id="content">
  <h1>Content for  id "content" Goes Here</h1>
  <p>djfghkjdf</p>
  <p>kdfjhgkjdfdfgbdhfjghkjdfghjkdfhgkj</p>
  <p>kjdfbgkjdfghkjdfghkjdfhgkjdfkjg</p>
  <p>dfkjbhkjdfg</p>
</div>

</body>
</html>

I thought that using z-index would mean that i could make the #content div appear above the video container. But this does not happen.

Answers

You don’t need z-index to do this. You can use a grid stack and as mentioned by CBroe you’ll need to set position relative on the content to enable positioning

body {
  margin: 0;
}

.video-container {
  /* grid stack */
  display: grid;
  width: 100%;
  height: 600px;
  position: relative;
}

.video-container video {
  /* position in grid stack */
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-container .caption {
  /* position in grid stack */
  grid-area: 1 / 1;
  text-align: center;
  color: #dc0000;
  padding: 20px;
}

#content {
  /* enable positioning */
  position: relative;
  background-color: #0F6;
  padding: 100px;
  margin: -100px 20% 100px 20%;
  /* you could also pull content up using 
     top: -100px; 
  */

}

<div class="video-container">
  <video autoplay muted loop>
        <source src="https://assets.codepen.io/68939/vidwp.mp4" type="video/mp4" />
    </video>
  <div class="caption">
    <h2>Your caption here</h2>
  </div>
</div>

<div id="content">
  <h1>Content for id "content" Goes Here</h1>
</div>

Use the below code, use the position style for the content section and manage the content on the video. Currently, I have added a dummy video URL; please replace it with your video.

body {
    margin: 0;
}

.video-container {
    z-index: 0;
    width: 100%;
    height: 600px;
    position: relative;
}

.video-container video {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    z-index: 1;
}

.video-container .caption {
    z-index: 2;
    position: relative;
    text-align: center;
    color: #dc0000;
    padding: 10px;
}

.main-div {
    position: relative;
}

#content {
    z-index: 3;
    background-color: #0F6;
    padding: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<div class="main-div">
    <div class="video-container">
        <video autoplay muted loop>
            <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
        </video>
        <div class="caption">
            <h2>Your caption here</h2>
        </div>
    </div>
    <div id="content">
        <h1>Content for id "content" Goes Here</h1>
        <p>djfghkjdf</p>
        <p>kdfjhgkjdfdfgbdhfjghkjdfghjkdfhgkj</p>
        <p>kjdfbgkjdfghkjdfghkjdfhgkjdfkjg</p>
        <p>dfkjbhkjdfg</p>
    </div>
</div>

<style>
body {
    margin: 0;
}

.video-container {
    z-index: 0;
    width: 100%;
    height: 600px;
    position: relative;
}

.video-container video {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    z-index: 1;
}

.video-container .caption {
    z-index: 2;
    position: relative;
    text-align: center;
    color: #dc0000;
    padding: 10px;
}

#content {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    background-color: #0F6;
    padding: 100px;


}

<div class="video-container">
    <video autoplay muted loop>
        <source src="Westgress Video.mp4" type="video/mp4" />
    </video>
    <div class="caption">
        <h2>Your caption here</h2>
    </div>

    <div id="content">
        <h1>Content for id "content" Goes Here</h1>
        <p>djfghkjdf</p>
        <p>kdfjhgkjdfdfgbdhfjghkjdfghjkdfhgkj</p>
        <p>kjdfbgkjdfghkjdfghkjdfhgkjdfkjg</p>
        <p>dfkjbhkjdfg</p>
    </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.