Having trouble making responsive text over videos

Question

I am new to HTML/CSS. I have created my first website using Cargo.

In a section where I have some videos, I'm trying to place their titles over them while keeping them responsive.

Viewing the website on a wide monitor makes the titles look a bit off, and on mobile, they are completely misplaced. I have tried creating a grid, but I wasn't successful with it.

This is an example of the HTML & CSS I use for the videos and titles (I know it's a mess).

Link to the website constantinesko.com/Sounds-1 to let you understand my issue better.

UPDATE: I've managed to wrap my videos with my titles making them responsive, thanks to the answer below. The last issue I'm facing now is that I can't make the titles align left on each video. I tried using text-align:"left"; but it didn't work and it seems like if I move the titles with the left:50%; or transform: translate(-50%,-50%); they stop being responsive.

Example using left:15%; :

27 inch monitor (https://prnt.sc/w1oxu9_0-tJ5)

Wide monitor (https://prnt.sc/fOlRR0HHsd2g)

<div class="video-container">
  
     <div class="vcontainer">
       <video id="vid1" preload="auto" onloadstart="this.volume=0.9" onmouseover="this.play()" onmouseout="this.pause()" loop="loop" width="100%" height="240px" poster="https://freight.cargo.site/t/original/i/75971115b3c32e4fdff42672cceb851cec352ac0d47b9fa22e985591df3f80ec/Metron_01_Cropped_Thumpnail.png" class="">
           <source src="https://skovideos.s3.us-west-2.amazonaws.com/9+Sec+Metron+01+Cropped.mp4" type="video/mp4">
       </video>
       <div class="title">
           <a href="https://constantinesko.com/Metron-01%22%3E">
           <div class="linkbox"> METRON 01 </div></a>
       </div>
     </div>

.video-container {
     display: flex;
     flex-direction: column;
     justify-content: center;
    
   }
   .vcontainer {
     width: 100%;
     height: 240px;
     position: relative;
     margin-bottom: 2%;
       
   }
 
 .title {
     width: auto;
     height: auto;
     display: block;
     position: absolute;
     font-family: "Monument Grotesk Variable", Icons;
     font-size: 2vw;
     font-style: normal;
     font-weight: 400;
     font-variation-settings: 'slnt' 0, 'MONO' 0;
     animation-duration: 1.5s;
     animation-name: slidein;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
     z-index: 3;
 }




#vid1{
    width: 100%;
    height: 240px;
    z-index: 2;
}

I think you need to wrap each video and title tag with a div and position the title absolute within this div. — Christian, Jun 06 '22 at 21:49
If I give this new div a class for example "vidtitle". I go to my CSS and type: .vidtitle #title1{ position: absolute; } Something like that? — Chronis Efk, Jun 06 '22 at 22:00
Kind of hard to explain in a comment. Maybe you can use one single video and title CSS id/class for all your videos by using a wrapper div. See [here](https://stackoverflow.com/questions/21797877/how-do-i-make-wrapper-div-correctly-wrap-divs-inside-of-it). The title will be part of each sub-div. Read more about [HTML layouts](https://www.w3schools.com/html/html_layout.asp). — Christian, Jun 06 '22 at 22:19
Thanks a lot for your time! I will look into it and try to solve it. — Chronis Efk, Jun 06 '22 at 22:35

score 3 · Accepted Answer · edited Jun 07 '22 at 12:53

3

Solve the issue for one video. The container class is for one video with its title. Add one main-container class for all your videos

    <div class="main-container">
     <div class="container">
       <video id="vid1" preload="auto" onloadstart="this.volume=0.9" onmouseover="this.play()" onmouseout="this.pause()" loop="loop" max-width="100%" height="718" poster="https://freight.cargo.site/t/original/i/92cc00ce1aa5295ba7248c875a72c8c25c5f4abf3ebcf0059648c1371855431b/Metron_01.png" class="">
           <source src="https://skovideos.s3.us-west-2.amazonaws.com/9+Sec+Metron+01.mp4" type="video/mp4">
       </video>
       <div class="title">
           <a href="https://constantinesko.com/Metron-01%22%3E">
           <div class="linkbox"> METRON 01 </div></a>
       </div>
     </div>
    </div>

<style>
   .main-container {
     display: flex;
     flex-direction: column;
     justify-content: center; 
   }
   .container {
     width: 400px;
     height: 200px;
     position: relative;
     margin: 50px;
   }
   video {
     width: 400px;
     height: 200px;
     position: absolute;
     top: 0;
     left: 0;
   }
 .title {
     width: auto;
     height: auto;
     display: block;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
     z-index: 2;
 }
 </style>

edited Jun 07 '22 at 12:53

Christian

4,902
4
24
42

answered Jun 06 '22 at 22:17

Issam Abdelhak

111
4

1

the container was for just one video, and you need just another main-container for all your videos no matter how many they are, just change your video link and the description – Issam Abdelhak Jun 06 '22 at 22:30
@IssamAbdelhak I tried your solution and for some reason the first title has a gap compared to the rest (https://prnt.sc/wq4hbwvgbzUd) and I can't seem to find a way to fix this. – Chronis Efk Jun 06 '22 at 22:46
@ChronisEfk just update the width and height of the container same as your video and not to auto, it gonna work. – Issam Abdelhak Jun 06 '22 at 22:54
@IssamAbdelhak Unfortunately it didn't work. They are responsive like I wanted them to be, but I can't figure out where this gap comes from. – Chronis Efk Jun 06 '22 at 23:02
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 07 '22 at 00:59

Christian · Answer 2 · 2022-06-07T19:34:48.397

This is how it works using Flexbox. I have used 100% width and I'd go for a mobile first approach. You can use media queries to change the view for bigger screens.

<html>
  <head>
    <style>
      .flex-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      video {
        width: 100%;
      }
      .box {
        font-size: 2em;
        color: white;
        position: relative;
        margin: 2px 0 0 0;
        width: 100%;
        text-align: center;
        top: 40px;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="item">
        <div class="box">Title 1</div>
        <video id="vid1" preload="auto" onloadstart="this.volume=0.9" onmouseover="this.play()" onmouseout="this.pause()" loop="loop" max-width="100%" poster="https://freight.cargo.site/t/original/i/92cc00ce1aa5295ba7248c875a72c8c25c5f4abf3ebcf0059648c1371855431b/Metron_01.png" class="">
           <source src="https://skovideos.s3.us-west-2.amazonaws.com/9+Sec+Metron+01.mp4" type="video/mp4">
        </video>
      </div>

      <div class="item">
        <div class="box">Title 2</div>
        <video id="vid1" preload="auto" onloadstart="this.volume=0.9" onmouseover="this.play()" onmouseout="this.pause()" loop="loop" max-width="100%" poster="https://freight.cargo.site/t/original/i/d4b583123535462eb80f81c40bed784d13af5f9191a1c622227e5e570b11ba4b/Sko-Keshar_CLIP_Light0000.png" class="">
           <source src="https://skovideos.s3.us-west-2.amazonaws.com/9+Sec+KESHAR+02+Cropped.mp4" type="video/mp4">
        </video>
      </div>

      <div class="item">
        <div class="box">Title 3</div>
        <video id="vid1" preload="auto" onloadstart="this.volume=0.9" onmouseover="this.play()" onmouseout="this.pause()" loop="loop" max-width="100%" poster="https://freight.cargo.site/t/original/i/132f4182223d63a0754a9065c77b827b1ade257834a82589dbf47250eff9bd0f/TTS_03.png" class="">
           <source src="https://skovideos.s3.us-west-2.amazonaws.com/9+Sec+TTS+03+Cropped.mp4" type="video/mp4">
        </video>

      </div>
  </body>
</html>

Update:

You may want to try

Try 

.item > .box {
        font-size: 2em;
        color: red;
        align-items: flex-start;
        position: relative; left: 10%; top: 100px; text-shadow: 0 0 15px;
    }


    <div class="flex-container">
      <div class="item">
        <div class="box">test</div>
        <video id="vid1" preload="auto" onloadstart="this.volume=0.9" onmouseover="this.play()" onmouseout="this.pause()" loop="loop" poster="https://freight.cargo.site/t/original/i/92cc00ce1aa5295ba7248c875a72c8c25c5f4abf3ebcf0059648c1371855431b/Metron_01.png" class="">
           <source src="https://skovideos.s3.us-west-2.amazonaws.com/9+Sec+Metron+01+Cropped.mp4" type="video/mp4">
        </video>
      </div>
...

This aligns the text on the left and adds a fixed percentage offset.

I appreciate the time you spent doing it. I've recently posted an update on the issue and it seems only the titles are off. Any chance of knowing how I can align them left without losing the responsiveness? — Chronis Efk, Jun 07 '22 at 16:28
I figured out the alignment and now my titles are where I want them to be, but still on a wide screen they look off. I am currently searching for the media queries like you suggested. Hope I find a solution there. — Chronis Efk, Jun 07 '22 at 17:46

Having trouble making responsive text over videos

2 Answers2