htmlcssresponsive

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%

Solution

  • 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.