CODEWITHSUNDEEP
htmlcssvideocss-position
Will
Will

Reputation: 1543

Overlay div in bottom right corner of video in CSS

Is it possible to overlay something on a video element without having to set the container div height and width like is done in the example below?

.container {
  position: relative;
  width: 640px;
  height: 360px;
}

.overlay {
  position: absolute;
  bottom: 0px;
  right: 0px;
  font-size: 18px;
  padding: .2em .2em;
  background-color: #fefefe;
}

video {
  position: absolute;

}
<div class="container">
  <video src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_5MB.mp4" width="640" height="360"></video>
  <div class="overlay">Overlay</div>
</div>

Upvotes: 0

Views: 1241

Answers (1)

Diego Lira
Diego Lira

Reputation: 11

One solution I found was to set the width and height of the video element to take 100% of the container div size.

I modified the code snippet so you can check the results below.

.container {
  position: relative;
}

.overlay {
  position: absolute;
  bottom: 0px;
  right: 0px;
  font-size: 18px;
  padding: .2em .2em;
  background-color: #fefefe;
  z-index: 999;
}

video {
  width: 100%;
  height: 100%;
}
<div class="container">
  <video src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_5MB.mp4" width="640" height="360"></video>
  <div class="overlay">Overlay</div>
</div>

Upvotes: 1

Related Questions