What is the best way to position an image in the center over a video using HTML and CSS?

I am currently developing a website with a background video and I want to overlay a company logo on top of it while keeping it centered. My coding language of choice for this project is using HTML and CSS. Here's the HTML code snippet I have for this particular section:

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

Despite my efforts, I'm facing difficulties in centering the logo. It doesn't stay centered when the page is resized. Can anyone shed light on what might be causing this issue?

htmlcss

Answer №1

#container {
  position: relative;
  display: inline-block; 
}
#gallery {
  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="container">
  <video playsinline autoplay muted loop id="gallery">
    <source src="http://www.example.com/video.mp4" type="video/mp4">
  </video>
  <img class="overlay" src="https://www.example.com/image.png">
</div>

I believe this code could be useful for your project.

(Remember to change the "src" attribute with your actual files.) Warmest regards

Answer №2

I made some alterations to the HTML code and content, implementing a background image 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>

Answer №3

<div id='container'>
  <video playsinline autoplay muted loop id="video-player">
    <source src="Media/Video.mp4" type="video/mp4>
  </video>
  <img class="overlay-img" src="Media/Overlay.png">
</div>

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to show the selected values of dropdown and checkboxes on a redirected page for confirmation using PHP?

<form action="action.php" method="POST" target="_self"> <table class="main" border="1" height="100%" align="center">t; <h3> <p id="id1" style="background-color: #9FF" >Registration form</p></h3> <tr><t ...

phphtml

Using ReactJS to strip HTML tags from JSON response

I'm having trouble figuring out how to strip HTML tags from a JSON response in reactjs. Here's the JSON response: { "price": "26,800.98", "diff": "<!--daily_changing-->+13.44 (+0.05%)&nbsp;& ...

javascripthtmljsonreactjstags

Enable sidebar navigation exclusively for mobile and iPad devices

Is there a way to implement a different navigation bar specifically for mobile devices like iPads? I'm considering using this one: Here is the source code: JSFiddle If anyone knows how to achieve this, please share! <link rel="shortcut icon" typ ...

jquerycsstwitter-bootstrapsidebar

Can you explain the meaning of the tag "&" ">" "*" in the context of useStyles functions?

After experimenting with React and Material-UI, I came across an interesting pattern in the code. When using the useStyle function, developers often create a class called 'root' and utilize the tag & > *. I tried to research the meaning be ...

cssreactjssassmaterial-ui

Is it possible to replicate an HTML table using JavaScript without including the headers?

Discover a JavaScript snippet in this stack overflow post that allows you to create a button for automatically selecting and copying a table to the clipboard. When pasting the data into an Excel template, my users prefer not to include the header informat ...

javascripthtmlcopyclipboard

Experiencing difficulties connecting with aspx while using Ext JS 4.2

Currently, I am facing an issue with making a call to an ASPX URL as the return keeps coming back as a failure. I have successfully used this URL in previous programming projects, but this is my first time utilizing it with Ext JS. Despite researching dif ...

javascriptasp.net.netcssextjs

Retrieving particular excerpts from a block of text that includes the keyword "javascript."

I have a chunk of string containing HTML source code. Currently, I am trying to read specific tags that I need using JavaScript. Since I am new to programming, I'm unsure how to proceed. Can anyone assist me with this? The issue lies in the following ...

javascripthtmlregextags

What are the steps for submitting a form by clicking on text?

Whenever I try to submit a form by clicking on span id="ToolBarDownload", the form id="myformID" doesn't seem to get submitted. Can someone help me figure out what's wrong with my code? Any suggestions are greatly appreciated! Thanks! Also, just ...

jqueryhtml

Empty space to the left of the vertical navigation bar

I'm struggling to get rid of the white space on the left side of my vertical navigation bar. I've attempted setting padding-left to 0 on my main navigation bar. This is my first time creating a navigation bar, so if you notice any semantic issu ...

csshtml

Content escapes its parent container and seamlessly transitions to the following element

I am facing an issue with the layout of my element, which includes an image and text centered inside a parent container. Whenever I try adding more elements below the existing image and text, the green text with a red border overflows the current parent . ...

htmlcsstwitter-bootstrap

Transmit information to a different JavaScript framework using Vue

Utilizing Vue, I create a JSON file using classic ASP from SQL Server and import the data. My objective is to showcase the received data on the page and in ApexCharts. The structure of the HTML page, getData.js, and the JSON from dataSql.asp is outlined b ...

htmlvue.jsrenderapexcharts

Issue with Bootstrap 5: Mobile Menu Failure to Expand

I’ve been struggling with this issue for days now. I’ve searched everywhere for a solution, but to no avail. That’s why I’m turning to the experts here for help :-) The problem I’m facing is that my mobile menu won’t open. Nothing happens when ...

javascripthtmlcssbootstrap-5

Favicon not appearing on Jekyll website

This is my first time working with Jekyll. I'm currently working on localhost and trying to set a favicon for the website. I generated the image.ico and added the code provided to my head.html file. The image appears in my _site folder, but it's ...

javascriptjqueryhtmljekyllfavicon

How can you eliminate a specific element from an HTML document?

Utilizing localStorage can be tricky when it comes to keeping the JSON file hidden from being displayed on the HTML page. One approach I used involves sending the JSON file to the client once and then performing all logic using that file. To prevent the JS ...

javascriptjsonhtmllocal-storage

Prevent span/button clicks by graying them out and disabling the ability to click using HTML and JQuery

I am facing a challenge with my two spans that reveal specific information when clicked. I want to make one span appear as a disabled button (greyed out) when the other span is clicked. I tried using $("#toggle-odd").attr("disabled", tr ...

javascripthtmljquerybootstrap-5

Error: The column 'joinedactivities.searchact id = searchact.id' is not recognized in the 'on clause'

I keep encountering this particular error: Error: Unknown column 'joinedactivities.searchact id = searchact.id' in the 'on clause'. I have meticulously inspected the table names and even attempted to make modifications, but multiple err ...

phphtmlmysqlsql

How can you ensure a cohesive visual style throughout various Razor and HTML views?

In my ASP.Net MVC 5 application, I have a Layout.cshtml and HTML view page included. However, I want to maintain a consistent look and feel across multiple views in the application. I am aware that this can be achieved by using a Razor view page with the f ...

htmlangularjsrazor

Can a <style> tag be included in a .css file without issue?

Within one of our projects, there is a <style> tag placed at the beginning of a CSS file (for the purpose of ensuring CSS highlighting in certain text editors): <style> body { ... } .... Although I am aware that this is considered incorrect ...

css

Splitting a list of accordions into two columns with CSS and React - a step-by-step guide!

I am looking for a way to showcase a list of Accordions in a two-column layout. Each Accordion consists of both a Summary and Details section, with the Details being visible only when the Summary is clicked. Unfortunately, I won't delve into the imple ...

htmlcssreactjscss-grid

Link the controls to an HTML table after clicking the button

I'm very new to programming and I'm seeking your help and guidance in order to improve myself. Here is the code where I am trying to add a control to an HTML table upon button click, but I am facing difficulties in its execution. Can anyone assis ...

htmldomhtml-table