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

Question

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?

Answer 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>

Answer 2

 #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

Answer 3

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>