Html Question posted in
Some basic documentation can be found here.

Error with HTML background video in responsive design

I’m creating a page for a local event and I made a countdown with a video background. However, when I try to make it responsive, it zooms in enormously and it is not possible to see everything on the cell phone. (I’m using google translator).
Project link:https://github.com/Rafael-Machado01/Ernani-Pro-2024

HTML: ` <!DOCTYPE html>

Ernani Pro 2024



    
        <p>Ernani Pro 2024</p>
      

      <video autoplay muted loop src="./assets/img/ernani.mp4" type="video/mp4">
        
      </video>

      <div class="countdown">
        <div>
          <h1 id="dias">00</h1>
          <p>Dias</p>
        </div>
        <div>
          <h1 id="horas">00</h1>
          <p>Horas</p>
        </div>
        <div>
          <h1 id="minutos">00</h1>
          <p>Minutos</p>
        </div>
        <div>
          <h1 id="segundos">00</h1>
          <p>Segundos</p>
        </div>
</div>
<div class="links">
<a href="./assets/pages/schedule.html">Programação</a>
<a href="https://www.instagram.com/radiobemtevi/" target="_blank" id="icon"><i class="fa fa-instagram" style="font-size:24px"></i></a>
<a href="#">Mapa Virtual</a> `

}` I just put it so that it covers the entire screen video width:100% height:100%

Tags:

2

Answers


  1. 0

    Your issue is object-fit: cover; in your CSS. This means that the video itself will be scaled so it covers the entire viewport. If you scale a landscape video to cover a portrait viewport (such as a phone), it will be "zoomed in".

    Replace it by object-fit: contain; and it will be visible entirely.

    Login or Signup to reply.
  2. 0

    you can use CSS media queries to adjust the styling for different screen sizes.

    1. Set the video to cover the entire background without zooming in.

    2. Make the countdown and links adapt to the screen size.

       <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Ernani Pro 2024</title>
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 </head>
 <body>
     <div class="content">
         <p>Ernani Pro 2024</p>

         <video autoplay muted loop class="video-background" src="./assets/img/ernani.mp4" type="video/mp4"></video>

         <div class="countdown">
             <div>
                 <h1 id="dias">00</h1>
                 <p>Dias</p>
             </div>
             <div>
                 <h1 id="horas">00</h1>
                 <p>Horas</p>
             </div>
             <div>
                 <h1 id="minutos">00</h1>
                 <p>Minutos</p>
             </div>
             <div>
                 <h1 id="segundos">00</h1>
                 <p>Segundos</p>
             </div>
         </div>

         <div class="links">
             <a href="./assets/pages/schedule.html">Programação</a>
             <a href="https://www.instagram.com/radiobemtevi/" target="_blank" id="icon"><i class="fa fa-instagram" style="font-size:24px"></i></a>
             <a href="#">Mapa Virtual</a>
         </div>
     </div>
 </body>
 </html>

    
   
    body, html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        font-family: Arial, sans-serif;
    }
    
    .video-background {
        position: fixed;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -1;
        transform: translateX(-50%) translateY(-50%);
    }
    
    .content {
        position: relative;
        z-index: 1;
        text-align: center;
        color: white;
    }
    
    .countdown {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px 0;
    }
    
    .countdown div {
        margin: 0 10px;
    }
    
    .links {
        margin-top: 20px;
    }
    
    .links a {
        color: white;
        margin: 0 10px;
        text-decoration: none;
    }
    
    /* Responsive Design */
    @media (max-width: 768px) {
        .countdown {
            flex-direction: column;
        }
    
        .countdown div {
            margin: 10px 0;
        }
    
        .links a {
            display: block;
            margin: 10px 0;
        }
    }
    ```
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search