'Video text overlay with "responsive" center alignment

I am trying to display a full width video with an overlay text that sits centered on the video vertically and horizontally. The centered positioning should respond to changes in the viewport width such that it is always centered. Also I would like a "caption" (h2 tag in the example) to always display right below the video regardless to how the viewport is sized.

I have attached my sample code - any help appreciated.

Thanks

Dennis

<head>
<style>

.header-unit {
       margin-top: 10px;
     }
     
#video-container {
       height:100%;
       width:100%;
       overflow: hidden;
       position: relative;
     }

#video-overlay {
       position: absolute;
       z-index: 1;
       font-size: 50px;
       color: red;
       margin: 0;
       transform: translate(-50%, -50%);
       width: 85%;
       text-align: center;
       top: 25%;
       left: 50%;
     }

video {
       position: absolute;
       z-index: 0;
     }
     video.fillWidth {
      width: 100%;
     }
     
</style>
</head>
    <div class="header-unit">
        <div id="video-container">
            <p id="video-overlay">Get A Quote!</a></p>
            <video autoplay muted loop class="fillWidth">
              <source src="https://www.w3schools.com/html/mov_bbb.mp4"/>
            </video>
        </div>
    </div>  
<h2>Test Caption</h2>
htmlcssvideooverlay


Solution 1:[1]

Please update your css with this and check:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.header-unit {
       margin-top: 10px;
  height: 100%;
     }
     
#video-container {
       height:100%;
       width:100%;
       overflow: hidden;
       position: relative;
     }

#video-overlay {
       position: absolute;
       z-index: 1;
       font-size: 50px;
       color: red;
       margin: 0;
       transform: translate(-50%, -50%);
       width: 85%;
       text-align: center;
       top: 50%;
       left: 50%;
     }

video {
       position: absolute;
       z-index: 0;
     }
     video.fillWidth {
      width: 100%;
           height: 100%;
    object-fit: cover;
     }
<div class="header-unit">
        <div id="video-container">
            <p id="video-overlay">Get A Quote!</a></p>
            <video autoplay muted loop class="fillWidth">
              <source src="https://www.w3schools.com/html/mov_bbb.mp4"/>
            </video>
        </div>
    </div>  
<h2>Test Caption</h2>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Amandeep Singh

Related Questions