Problem encountered with incorporating HTML background video into fluid responsive layout

Working on a webpage for a community event and integrated a countdown with a video background. However, encountering issues with responsiveness as it zooms in too much on mobile devices, making it difficult to view everything properly. (Translated using Google Translate). 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> `

}` Seeking a solution to make the video cover the entire screen while maintaining a responsive design width:100% height:100%

htmlcssresponsive

Answer №1

The problem lies with the CSS property object-fit: cover;. This setting causes the video to be resized so it covers the entire viewport, which can result in it being "zoomed in" if the aspect ratios do not match.

To resolve this issue, change it to object-fit: contain; to ensure that the video is fully visible within the viewport without excessive scaling.

Answer №2

Utilize CSS media queries para ajustar o estilo para diferentes tamanhos de tela.

  1. Defina o vídeo para cobrir todo o plano de fundo sem dar zoom.

  2. Faça a contagem regressiva e os links se adaptarem ao tamanho da tela.

     <!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"&g;
         <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;
    }
    
    /* Design Responsivo */
    @media (max-width: 768px) {
        .countdown {
            flex-direction: column;
        }
    
        .countdown div {
            margin: 10px 0;
        }
    
        .links a {
            display: block;
            margin: 10px 0;
        }
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I integrate data pulled from another website onto my HTML webpage with Vue.js?

I have successfully extracted data from an API website and can display it in the console. However, I am facing issues with displaying the data on the webpage itself. Can someone assist me in this matter? Specifically, I am trying to display the id element ...

javascripthtmlvue.jsfetch-api

What is the best way to sort through td attributes in an HTML table?

I am trying to filter the td attribute in my HTML table, but the results are not as expected. My goal is to display the tr data-value attribute that contains the specified value. "My English may not be perfect, please bear with me." function FilterTabl ...

javascriptjqueryhtmlfilterattributes

Ways to retrieve the file name and additional attributes from a hidden input type

Is it possible to access the file name and other attributes of a hidden file when submitting it using the <input type="hidden"> tag? My current project involves drag and drop file functionality on a server using Node.js. If I am able to dynamically ...

javascriptjquerynode.jshtml

Issues with absolutely positioned slideshows

Currently, I am attempting to design a slideshow using absolute positioning to layer images on top of each other. However, I am encountering a problem where the text below the slideshow is also being stacked on top of the pictures. I have tried enclosing t ...

htmlcsscss-position

Steps to launching a URL in a new window on Internet Explorer

I want it so that when button1 is clicked, the URL opens in a new window using Internet Explorer. ...

javascripthtml

Center a DIV class with CSS

Experiencing some challenges with CSS in relation to layout problems. Take a look at this screenshot: In my CSS, I have implemented the following: .image{float:right; padding-top:10px; padding-left:10px; padding-bottom:10px;} .description{font-size:15px; ...

htmlcss

Material UI Grid Items not stretching to fill the entire available width

I'm currently working with a nested Grid system in Material UI, but the Grid items are only occupying a fixed width and leaving some empty space. The issue arises when this fixed space is used up and instead of adjusting their internal free space, the ...

cssreactjsmaterial-uimaterial-designstyling

Issues with Image Placement in Internet Explorer

My cat image on my website appears significantly lower than all the other images when viewed on Internet Explorer (v11). While it looks perfect in Chrome, I cannot figure out why this discrepancy exists. For the development of this website, I utilized pred ...

htmlcssimagetwitter-bootstrap

Bootstrap Carousel unable to transition to the next image

I cannot seem to interact with the arrows or dots on the carousel. How can I set it up to automatically transition to the next slide? I have tried various solutions but nothing seems to work. Any assistance would be greatly appreciated. Thank you! Below i ...

htmltwitter-bootstrapcarousel

Does Vue3 support importing an HTML file containing components into a single file component (SFC)?

I am working on a Form-Component (SFC) that is supposed to import an HTML file containing Vue components. Form-Component <template src="../../../views/form-settings.html"></template> <script setup> import Button from "./. ...

javascripthtmlvue.jsvue-componentvuejs3

Enhance the color scheme of your collapsed or expanded Bootstrap NAV for mobile devices

Currently working on customizing the navbar using Bootstrap. I've been able to style it perfectly for both desktop and mobile devices in its initial state. The issue arises when attempting to style the navbar in its expanded and collapsed states on m ...

javascriptjqueryhtmlcsstwitter-bootstrap

Identifying the element with the specified ID within the table's <th> tag in JavaScript

I want to create a table with the title: Summary Statement as of August 3, 2017 at 12:55 The date is functioning properly using JavaScript in other parts of the code, but not in this section. Is there a specific technique I should be aware of? The rest of ...

javascriptphpmysqlhtml

Utilize HTML5, CSS, and Responsive Web Design to place four boxes into a div container

Is there a way to arrange four boxes inside a div so that they are positioned at the corners of the top-left, top-right, bottom-left, and bottom-right? And when you click on the box in the middle, a window opens with text. I'm looking for something s ...

htmlcssresponsive-design

The Pin property in GSAP is behaving unexpectedly when used in NextJS

I recently tried to learn gsap and wanted to create a smooth animation where I could scroll down a page and have a long word scroll horizontally and get pinned while scrolling using the scrollTrigger plugin of gsap. I followed a tutorial but ran into an is ...

htmlnext.jsgsapscrolltrigger

Is there a way to eliminate the notification stating "this page has used data..." from appearing on the screen?

Similar Question: I am confused about PHP Post/Redirect/Get Whenever I reload a page with a form, I receive the "this page has used data, are you sure you want to refresh" message. I attempted using the HTTP-303 response code to eliminate this issue ...

phphtmlformsheader

Creating an event listener using a calendar icon

I am looking to create a custom datepicker <input type="text" name="Birth" id="calendarInput" required class="inputField" placeholder="31.12.2001"> <input type="date" name="Birth&qu ...

javascripthtmljquerycss

Continuously make Ajax requests to populate numerous div elements

There are two div elements present on my webpage. <div id="1"></div> <div id="2"></div> I am attempting to dynamically populate these divs using the following php call. <script> var queries = ["SELECT * from table1", "S ...

javascriptphpjqueryhtmlajax

I am struggling to make my Bootstrap 5 Navbar transparent. Can anyone help me figure this out?

I've been struggling with my Bootstrap Navbar, which appears as white no matter what I do. I've tried numerous solutions from Stack Overflow to make it transparent without any luck. Even after setting the background to transparent and ensuring t ...

htmlcssnavbarbootstrap-5transparent

H3 Tag Embraced by a Repetitive Image

As I'm developing a website, I've encountered an interesting challenge... I have an h3 tag that requires a repeating background on both sides. It's a bit difficult to describe, so I created this graphic to illustrate... Essentially, it&apo ...

htmlcss

Scrollable container with jQuery draggable functionality

I am currently working on implementing a draggable list that I want to contain within a scrollable div. $( ".draggable" ).draggable(); Here is the fiddle I have created for this: http://jsfiddle.net/YvJhE/660/ However, the issue I am facing is that the ...

javascriptjqueryhtmlcssdraggable