CODEWITHSUNDEEP
htmlcssvideooverlay
mrwassen
mrwassen

Reputation: 55

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>

Upvotes: 0

Views: 773

Answers (1)

Amandeep Singh
Amandeep Singh

Reputation: 848

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>

Upvotes: 2

Related Questions