'how to fix "Video is not fullscreen"

Im building a website with HTML + CSS. and Im trying to use a video as the background of my website. The problem is there is some kind of borther in the left and right of my video.

I have tried using width 100% and height 100%, width and height 100vh and 100vw, and min-width and min-height 100% but there is still some remaining space in both left side and right side of the video

.container {
  background: rgba(0, 0, 0, 0.9);
  text-align: center;
  color: white;
  font-size: 2em;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 0;
}


/*Adjust container for Fullscreen Video Background*/

.blue {
  grid-column: 1/-1;
  height: 100vh;
}

.video {
  height: 100vh;
  min-width: 100%;
  min-height: 100%;
}

.video-overlay {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: #000000;
  z-index: 0;
  opacity: 0.75;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <link rel="stylesheet" href="style.css">
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div class="container">
    <div class="blue area">
      <video width="100%" height="100vh" class="blue video-background" src="https://www.w3schools.com/howto/rain.mp4" autoplay muted loop>
        </video>
      <div class="blue video-overlay"></div>
      <nav>
        <ul class="navigation sticky">
          <li class="arcananame">ARCANA</li>
          <li class="choice"><a href="#">Home</a></li>
          <li class="choice"><a href="#">About Us</a></li>
          <li class="choice"><a href="#">Gallery</a></li>
          <li class="choice"><a href="#">Events</a></li>
          <li class="choice"><a href="#">Contact Us</a></li>
        </ul>
      </nav>
      <div class="banner title">
        <h2 id="banner h1">Welcome to ARCANA</h2>
        <h6 id="banner h6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h6>
      </div>
    </div>
    <div class="red area">red</div>
    <div class="green area">green</div>
    <div class="yellow area">yellow</div>
    <div class="black area">black</div>
  </div>
</body>

</html>

I expected the video will be fullscreen.

html css

Solution 1:^[1]

body{
padding:0px;
margin:0px;
}


video{
position:fixed;
width:100%;
height:100vh;
}

<video width="100%" height="100vh" controls>
  <source src="https://www.bigbuckbunny.org.mp4" type="video/mp4">
  <source src="https://www.bigbuckbunny.org.ogg" type="video/ogg">
</video>

you can put your video as you like

Solution 2:^[2]

/* Style the video: 100% width and height to cover the entire window */
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

/* Style the button used to pause/play the video */
#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#myBtn:hover {
  background: #ddd;
  color: black;
}

<!-- The video -->
<video autoplay muted loop id="myVideo">
  <source src="rain.mp4" type="video/mp4">
</video>

<!-- Optional: some overlay text to describe the video -->
<div class="content">
  <h1>Heading</h1>
  <p>Lorem ipsum...</p>
  <!-- Use a button to pause/play the video with JavaScript -->
  <button id="myBtn" onclick="myFunction()">Pause</button>
</div>

I hope this will fix your problem.

Solution 3:^[3]

**Hello, there. Have you checked the video to see if it is of high definition? I mean, is it between 720p, 1080p definition? Try checking to see if the video is of that quality. Anything lower than that could be a quarter screen result. And if it isn't of those high definitions, then there is no code to fix it unless by special effort.strong text

Solution 4:^[4]

Unfortunately, this is done easily with images can you simply set it as the background. Here is a Bootstrap example that works great for video. I went ahead and applied it to your code and added the necessary styles. Seems to be working fine to me!

#video-background {
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
}

.video-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #000000;
  z-index: 1;
  opacity: 0.75;
}

section.main {
  position: relative;
  top: 100vh;
}

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>
  <header>
    <div class="video-overlay"></div>
      <video autoplay muted loop id="video-background" class="position-absolute end-0 bottom-0 h-auto w-auto">
        <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4"> Your brower is old </video>
  </header>
  <section class="main">
        <nav>
        <ul class="navigation sticky">
          <li class="arcananame">ARCANA</li>
          <li class="choice"><a href="#">Home</a></li>
          <li class="choice"><a href="#">About Us</a></li>
          <li class="choice"><a href="#">Gallery</a></li>
          <li class="choice"><a href="#">Events</a></li>
          <li class="choice"><a href="#">Contact Us</a></li>
        </ul>
      </nav>
      <div class="banner title">
        <h2 id="banner h1">Welcome to ARCANA</h2>
        <h6 id="banner h6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h6>
      </div>
    <div class="red area">red</div>
    <div class="green area">green</div>
    <div class="yellow area">yellow</div>
    <div class="black area">black</div>
  </section>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	SuperDJ
Solution 3	JADINICE SCOARTS
Solution 4

'how to fix "Video is not fullscreen"

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]