CODEWITHSUNDEEP
htmlcss
Benny B
Benny B

Reputation: 65

How can I center an image over a video using HTML and CSS?

I'm working on a website where I have a background video playing, and I want to display a company logo over that background video while it plays. I want that logo to be centered. I'm using HTML and CSS. Right now, my HTML code for that section is:

#reel {
  position: absolute;
  visibility: hidden;
  right: 0;
  top: 8px;
  min-width: 100%; 
  min-height: 100%;
}

#overlay {
  top: 50%;
}
<!-- BACKGROUND REEL--> 
<div>
  <video playsinline autoplay muted loop id="reel">
    <source src="Media/Reel.mp4" type="video/mp4">
  </video>
  <img class="overlay" width="40%" src="Media/Transparent.png">
</div>

For whatever reason, I can't quite get it to center. I want the page to be able to shrink and have the logo stay in the center but right now it's not. Does anyone know why?

Upvotes: 4

Views: 1892

Answers (3)

user15234229
user15234229

Reputation: 

#wrapper {
  position: relative;
  display: inline-block;
}
#reel {
  width: 100vw;
}
.overlay {
  position: absolute;
  width: 40%;
  left: 30%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
<div id="wrapper">
  <video playsinline autoplay muted loop id="reel">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
  <img class="overlay" src="https://www.w3schools.com/images/driveicon_32.png">
</div>

I think this code might help you.

(Please change the "src" attribute in real usage.) Best regards

Upvotes: 4

user3180351
user3180351

Reputation: 1

<div id='box'>
  <video playsinline autoplay muted loop id="reel">
    <source src="Media/Reel.mp4" type="video/mp4">
  </video>
  <img class="overlay" src="Media/Transparent.png">
</div>

<style>
  #box {position:fixed;width:100%;height:100%;}
  #reel {position:absolute;width:100%;height:100%;}
  .overlay {width:60px;height:40px;top:calc(50% - 20px);left:calc(50% - 30px);position:absolute;}
</style>

Upvotes: 0

Satish Modha
Satish Modha

Reputation: 777

I modify some code & content in HTML structure, I use background image for overlay.

.video-wrapper {
    position: relative;
    height: 100%;
    width: auto;
    display: table;
}

.video-wrapper video#reel {
    position: relative;
    visibility: visible;
    width: auto;
    display: table;
    object-fit: cover;
}

.video-wrapper:after {
    content: '';
    left: 0;
    height: 100%;
    width: 100%;
    top: 0;
    position: absolute;
    z-index: 999;
    opacity: 0.5;
    background-image: url('https://cdn.pixabay.com/photo/2016/11/22/21/57/apparel-1850804_960_720.jpg');
}
<!-- BACKGROUND REEL--> 
        <div class="video-wrapper">
              <video id="reel" poster="" playsinline="" autoplay="" muted="" loop="">
                <source src="https://assets.mixkit.co/videos/preview/mixkit-woman-modeling-a-short-black-dress-805-large.mp4" type="video/mp4">
          <img class="overlay"  src="https://cdn.pixabay.com/photo/2016/11/22/21/57/apparel-1850804_960_720.jpg">
        </div>

Upvotes: 0

Related Questions