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.

<video id="vid1" preload="auto" onl oadstart="this.volume=0.9" onm ouseover="this.play()" onm ouseout="this.pause()" loop="loop" max-width="100%" height="718" poster="https://freight.cargo.site/t/original/i/92cc00ce1aa5295ba7248c875a72c8c25c5f4abf3ebcf0059648c1371855431b/Metron_01.png" >
    <source src="https://skovideos.s3.us-west-2.amazonaws.com/9 Sec Metron 01.mp4" type="video/mp4">
</video>

    <div id="title1">
     <a href="https://constantinesko.com/Metron-01">">
     <div > METRON 01 </div></a>
    </div>

#vid1{

    position: relative;
    width: 100%;
    height: 100%;
    margin-top: -5%;
    clip-path: polygon(0% 10%,100% 10%,100% 45%,0% 45%);
    z-index: 2;
}

#vid2{

    position: relative;
    width: 100%;
    height: 100%;
    margin-top: -33.5%;
    clip-path: polygon(0% 10%,100% 10%,100% 45%,0% 45%);
    z-index: 2;
}

#vid3{

    position: relative;
    width: 100%;
    height: 100%;
    margin-top: -35.0%;
    clip-path: polygon(0% 13%,100% 13%,100% 48%,0% 48%);
    z-index: 2;
}

#title1{

    position: absolute;
    font-family: "Monument Grotesk Variable", Icons;
    font-size: 2vw;
    margin-left: 1vw;
    align-self: center;
    top:4.6vw;
    color: rgba(255, 255, 255, 0.88);
    animation-duration: 1.5s;
    animation-name: slidein;
    z-index: 6;
    font-style: normal;
    font-variation-settings: 'slnt' 0, 'MONO' 0;
    font-weight: 400;
}

#title2{

    position: absolute;
    font-family: "Monument Grotesk Variable", Icons;
    font-size: 2vw;
    margin-left: 1vw;
    color: rgba(255, 255, 255, 0.88);
    align-self: center;
    top: 17vw;
    animation-duration: 1.5s;
    animation-name: slidein;
    z-index: 5;
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'slnt' 0, 'MONO' 0;
}

#title3{

    position: absolute;
    font-family: "Diatype Variable", Icons;
    font-size: 2vw;
    margin-left: 1vw;
    color: rgba(255, 255, 255, 0.88);
    align-self: center;
    top: 29.7vw;
    animation-duration: 1.5s;
    animation-name: slidein;
    z-index: 5;
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'slnt' 0, 'MONO' 0;
}

CodePudding user response：

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 >
     <div >
       <video id="vid1" preload="auto" onl oadstart="this.volume=0.9" onm ouseover="this.play()" onm ouseout="this.pause()" loop="loop" max-width="100%" height="718" poster="https://freight.cargo.site/t/original/i/92cc00ce1aa5295ba7248c875a72c8c25c5f4abf3ebcf0059648c1371855431b/Metron_01.png" >
           <source src="https://skovideos.s3.us-west-2.amazonaws.com/9 Sec Metron 01.mp4" type="video/mp4">
       </video>
       <div >
           <a href="https://constantinesko.com/Metron-01">">
           <div > 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>

CodePudding user response：

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 >
      <div >
        <div >Title 1</div>
        <video id="vid1" preload="auto" onl oadstart="this.volume=0.9" onm ouseover="this.play()" onm ouseout="this.pause()" loop="loop" max-width="100%" poster="https://freight.cargo.site/t/original/i/92cc00ce1aa5295ba7248c875a72c8c25c5f4abf3ebcf0059648c1371855431b/Metron_01.png" >
           <source src="https://skovideos.s3.us-west-2.amazonaws.com/9 Sec Metron 01.mp4" type="video/mp4">
        </video>
      </div>

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

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

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