Having Trouble with the Background Video Scaling on My HTML Bootstrap Page for Mobile Devices

I have been working on an HTML background video page, and everything seems to be working perfectly on desktop. However, when it comes to mobile, the video does not cover the full screen. Only half of the video is visible on the mobile screen.

Here is the HTML code I have used:

    <div style="max-width:100vw;height:100vh;overflow:hidden;">
        <video autoplay muted loop id="myVideo">
        <source src="video.mp4" type="video/mp4">
        Your browser does not support HTML5 video.
        </video>
     </div>

And here is the CSS code for the video:

    #myVideo {
    
      min-width: 100%;
      min-height: 100%;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; 
    }
htmlcssbootstrap-4

Answer №1

It seems like the issue stems from the discrepancy in the width and height of the video element. One possible solution is to implement a media query specifically for mobile devices to adjust how the containing div behaves:

div {
    width:100vw;
    max-height:100vh;
    overflow:hidden;
}

@media (min-width: 700px) {
    div {
        max-width:100vw;
        height:100vh;
    }
}

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

The body can only stretch up to a certain percentage of its width, not a full 100%

Recently, I've been encountering an issue with my webpage where the body does not stretch 100% the width of the screen. I've tried numerous CSS rules to fix it, but nothing seems to be working. When you view the page in a browser, it appears to c ...

htmlcssstretch

Step-by-step Guide: Building a Nested Bootstrap Navigation Tabs Component on a Webpage

Within a page, I have integrated nested bootstrap navs components. The issue arises when clicking on "Nested Tab 2," which functions correctly, and then switching to "Nested Tab 1" where the tab content is not displaying properly. I am uncertain if there ...

javascripttwitter-bootstrapbootstrap-4slick.js

Can someone share tips on creating a stylish vertical-loading progress bar with a circular design?

Currently, I am working on developing a unique progress bar that resembles a glass orb filling up with liquid. However, due to its rounded shape, the traditional approach of adjusting the height does not produce the desired result (as illustrated in this f ...

javascriptjqueryhtmlcss

Initiating an action the moment the element comes into view by scrolling

I need to apply specific classes to an element with an id of ig-container. The classes I want to add are: $("#ig-container").addClass("animated bounceInRight"); I aim to animate this element once it becomes visible on the screen, triggered by a user scro ...

jqueryhtmlanimationparallax

Display identical elements from an array and shuffle them every 300 seconds

I created this code snippet that currently displays 5 random rows of data from an array each time it is executed. My goal is to modify the code so that it selects and displays the same 5 random values from the array for a duration of 5 minutes before rand ...

phphtmlarraysrandom

How about wrapping a large amount of text three times and including a "read more" link?

I am tasked with creating an HTML element that automatically detects when text has wrapped three times, truncates the content, and adds a "more..." link at the end of the third line. Can this be achieved? If yes, what is the process to implement it? ...

javascripthtmlcssword-wrap

Guide to positioning the layout inflater on the right side

I am facing an issue with the layout inflater where the inflated layout appears in the center of the page instead of the intended right corner placement. I have attempted to modify the gravity to right, but it did not resolve the problem. Below is a snipp ...

androidhtmlcssandroid-layout

Scrolling to an id within dynamically loaded content using jQuery after an ajax request

After loading content via ajax, I am unable to scroll to the item, as the page remains at the top. Strangely, when I refresh the page dynamically with content caching enabled, the page scrolls to the desired target. var startPageLoader = function( pid, si ...

javascriptjqueryhtmlajaxscroll

The PHP script is failing to send out email notifications

I am facing an issue with my website's contact form that is supposed to send out an email after the user fills it out and clicks submit, but it does not appear to be working. Unfortunately, I do not have access to the mail server since it is hosted e ...

phphtml

Tips for automatically scrolling to the bottom of a div when new data is added

I'm working on a project with a table nested inside a div, and it has some unique styling: #data { overflow-x:hidden; overflow-y:visible; height:500px; } Currently, as the table fills up with data, a vertical scroll bar appears. But I wa ...

javascriptjqueryhtmlcss

How can "this" be properly utilized in jQuery?

I am attempting to retrieve the title attribute of an element from various elements with the same class, each having different attributes. This is my current approach: HTML <div title="title1" class="pager" onclick="location.href='link.aspx& ...

javascripthtmljqueryjquery-events

What methods can I use to extract particular information from HTML when working with React?

I am currently working with an API that returns a preformatted HTML file containing CSS styles and ID tags that indicate specific information I need to extract. The challenge is that the HTML code is not very visually appealing, and I want to render it usi ...

htmlreactjscomponentsjsx

Featuring my Cookie page prominently on my website's homepage

I am facing a simple issue: I have a cookie verification page (cookies_check.php) that I want to include on my home page (accueil.php). So, currently, the only code on accueil.php is: <?php include ('Controleur/cookies_check.php'); ?> He ...

phpcookiesincludehtml

Restrict the input to only allow for parentheses, disallowing any letters or numerical characters

Only parentheses are allowed in the input field; letters and numbers will not be accepted. function checkBrackets() { var inputVal = document.getElementById("input").value; var result = document.getElementById("strong").value; console.log(inputVal, ...

javascripthtml

Streamline Access to Zimbra Server Automatically

Currently, I am creating a webpage with a login feature at www.newpage.com. Here is the code snippet for reference: <form name="login"> Username<input type="text" name="userid"/> Password<input type="password" name="pswrd"/> <input ty ...

javascripthtmlauthenticationautomationzimbra

The loading icon appears stuck and does not rotate on iOS version 15.3 and above, but functions properly on versions below 15.3

The loading icon does not spin on iOS versions > 15.3 or 16.1, but it works perfectly fine on lower iOS versions for iPhone and iPad, as well as on Android browsers. Below is the CSS code for reference. I've attempted using webkit for Safari and a ...

cssiosiphonecss-animationscss-transforms

The integration of CSS into Laravel was unsuccessful

Below is the content of my index file located in views.admin: <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet&qu ...

csslaravel

Error in Python Django when using the Post method: MultiValueDictKeyError

When a user chooses a color in a form, I should receive the value, but instead I get a MultiValueDictKeyError and I can't figure out why. This is the code in my views: def primeira_pergunta(request): trans = Tranfer() my_list = trans.shared[ ...

pythondjangotemplatesbootstrap-4

What is the best way to compress @font-face using gzip?

Could you demonstrate how to gzip a webfont kit? The code provided by the generator is as follows...what modifications are necessary? @font-face { font-family: 'DesigersBold'; src: url('desib__-webfont.eot'); src: url(&apos ...

cssgzipfont-face

Is there a way to spin the picture but keep the container still?

Is there a way to animate the rotation of the gradient color without rotating the rhombus? I attempted using transform: rotate, but it ended up rotating the entire shape. Any suggestions on how to achieve this effect? .box { position: absolute; top ...

htmlcsscss-animations