CODEWITHSUNDEEP
htmlcss
Chronis Efk
Chronis Efk

Reputation: 25

Having trouble making responsive text over videos

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;
}

Upvotes: 2

Views: 331

Answers (2)

Christian
Christian

Reputation: 5521

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.

Upvotes: 1

Issam Abdelhak
Issam Abdelhak

Reputation: 101

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>

Upvotes: 3

Related Questions