What is the best way to create a 1920X1080 resolution video with full visibility for use as a background?

I attempted to fix the issue by adjusting the video width and height, but I still couldn't achieve full visibility. For example, my video is 1920X1080 but my window size is only 1366x768, causing a mismatch.

Furthermore, I tried setting the width as auto and the height as 100%, which allowed me to see the entire video but left empty spaces on both sides of the video. I need a solution that eliminates these spaces.


    <video width="100%" height="100%" autoplay muted>
       <source src="img/xxxxx.mp4" type="video/mp4">
        Your browser does not support the video tag.
     </video>

CSS


html,body{overflow:hidden;}
.general video { height: auto; width: 100%; position: absolute; top:0;}

-thank you

htmlcssvideo

Answer №1

Eliminate the margin and padding from the html and body elements. Disable the player controls. To enter full screen mode, press F11 in your browser:

html,
body {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
<video width="100%" height="100%" autoplay="">
  <!-- MP4 must be first for iPad! -->
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
    <!-- Safari / iOS, IE9 -->
    <source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">
      <!-- Chrome10+, Ffx4+, Opera10.6+ -->
      <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg">
        <!-- Firefox3.6+ / Opera 10.5+ -->
</video>

Answer №2

It's possible that the area you're referring to is the standard padding and margin.

Here's a solution:

*{
   padding: 0;
   margin: 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

Interact with HTML style attribute using JavaScript

Is there a way to retrieve a specific CSS property from the style attribute of an HTML element, without considering the stylesheet or computed properties? For example: <div style="float:right"></div> function fetchStyleValue(element, propert ...

javascriptjqueryhtmlcss

Exploring the hover effects on Kendo charts and series

I have encountered an issue with my kendo chart. The series hover works fine when the mouse hovers over the serie, but I am facing a problem where the value in the line does not appear as expected. I am unsure of why this is happening. $("#chart1").data(" ...

javascriptcsshtmlkendo-uikendo-chart

The navigation menu displays a flickering effect while transitioning between pages, specifically noticeable on Chrome

I am facing an issue with a website I am currently building. The navigation menu seems to flicker when transitioning from one page to another, but this problem only occurs in Chrome and IE. What's even more puzzling is that the flickering doesn' ...

htmlcssnavigationflicker

Tips for efficiently implementing AJAX requests for multiple forms within a single webpage

Previously, I had a form where clicking submit would hide the form and display the result on a div with classname=dig. However, after adding more forms, all the forms started submitting at the same time instead of individually. How can I fix this issue in ...

javascriptjqueryhtmlajax

Adjusting the size of two cards with distinct content simultaneously using Bootstrap

Currently, I am in the process of developing an app using Bootstrap. The main objective of the code snippet below is to establish three rows within a container, with the initial row containing two columns each housing a card. In the first card (top left), ...

htmlcssbootstrap-5bootstrap-table

An HTML component with no styling or appearance

When using JavaScript to dynamically modify text on a web page, I am running into issues with the text not being inline with other elements such as texts and inputs. I've tried using <div> and <p> but they create new lines and other format ...

htmlformattingtags

Tips for aligning the child elements of a dropdown menu to stick with the parent's top position

It's important that progress and my goals are clearly outlined here: View my CodePen When it comes to the "Offices" section, I need the child objects to display directly below and ideally match the width of the parent element. Here is the code snip ...

jqueryhtmlcss

Dynamic Height in React Material-UI Table with Sticky Headers and Multiple Rows

Currently, I am working with React and Material-UI to create a table that needs to have a sticky header for a multi-row table head. The challenge I'm facing is that I don't want to specify a fixed height for the table, but instead have all lines ...

htmlcssreactjsmaterial-ui

Having trouble submitting the content from my textArea within the form and sending a POST REQUEST

HTML I have created a form to send requests to my server. <form action="/compose" method="post"> <div style="margin-bottom: 1rem; margin-top: 2rem;"> <label for="exampleInputEmail1" class ...

htmlnode.js

"Enhance your website with a 'Read More' link using

I'm in the process of creating a simple example for displaying hidden content with a "Read More" button. The setup includes a paragraph and a button, with half of the text inside a span tag that is initially hidden. However, I have been able to implem ...

javascripthtmlcssfadein

Enabling element overlap using jQuery

I have implemented jQuery to animate a navbar button on one of my web pages. However, the animation causes the div below it to be displaced and disrupts the layout. Is there a way to allow the button to animate without affecting the position or layout of t ...

jqueryhtml

What is the reason that the CSS3 property name 'filter' is not recognized in Windows 8 applications?

I'm in the process of adapting my own codepen for a Windows 8 desktop app. Everything runs smoothly on Codepen, with the exception of some CSS adjustments from -webkit- to -ms-. However, I encountered an issue regarding this specific line in the CSS s ...

htmlcssvisual-studio-2012svgwindows-8

Media query unable to fetch the appropriate CSS file

After reading an interesting article at , I have been experimenting with different ideas. One of my goals is to dynamically load a specific CSS file based on the device size accessing my website. Below is the code that I am currently using: <link hre ...

csstwitter-bootstrapresponsive-design

Enhance your web design skills by customizing Bootstrap5 framework styles using the @layer feature

Here is the HTML code I am working with: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=& ...

cssbootstrap-5css-layer

PHP incorporate diverse files from various subfolders located within the main directory

My question is similar to PHP include file strategy needed. I have the following folder structure: /root/pages.php /root/articles/pages.php /root/includes/include_files.php /root/img/images.jpg All pages in the "/root" and "/root/art ...

phphtmlcssimageinclude

How to conceal the URL path shown during the hover effect of an anchor tag

When using an action link in an anchor tag to download an uploaded file, it may display a path on hover effect like this: <a href="@Url.Action("DownloadFiles", "Document", new { id = doc.Id, moduleName = ModuleName })">@doc.Name</a> The displ ...

jqueryhtml

Display the hidden div element when clicked

In my code, I have two div elements as follows: <div class='staticMap'></div> <div class='geolocation-common-map'></div> Initially, the 'geolocation-common-map' div is removed using jQuery when the pa ...

javascriptjqueryhtml

Utilize Bootstrap's collapsible navbar feature to smoothly navigate to a designated section of the webpage

After creating a navigation bar using bootstrap 4, I encountered an issue when trying to collapse the navbar and jump to an anchor simultaneously in mobile view. If I only include href="#services", it successfully jumps to the correct section of ...

htmlbootstrap-4

Tips for utilizing the router instance on a different HTML page within the Backbone JS framework

I'm new to Backbone JS and still learning its intricacies. In main.js, I have created a router class that is included in index.html. I've also created an object of that router class associated with the same HTML page. However, when I redirect t ...

javascriptjqueryhtmlbackbone.jsbackbone-routing

Element not found: {"method":"name","selector":"markUp"}

Snippet : System.setProperty("webdriver.chrome.driver", "C:\\Users\\pkshirs3\\SeleniumMaterial\\chromedriver.exe"); WebDriver webDriver = new ChromeDriver(); String urlToBeUsed = "internalURL"; webDri ...

javahtmlselenium-webdriver