Implementing a Fullscreen Background Video with HTML and CSS-CodePudding

Okay, to start, this may be a duplicate but I for the life of me cannot make it fit full screen on my Chromebook. As the title states, I have stripped my html site to the bare bones to debug why this video will not fill the screen.

I've tried near every stackoverflow answer, YouTube video, W3Schools article, and it will not fill the entire width. There's this small section on the right of the screen that won't fill.

Here's my HTML file:

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Derek Martin</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <video autoplay muted loop id="myVideo">
    <source src="vid.mp4" type="video/mp4">
    </video>
</body>

</html>

And my CSS file:

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

.myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

Absolutely any pointers will be appreciated because out of all the things I cannot nail in CSS and HTML is just making a video span the entire screen.

EDIT: https://websiteportfolio.derek-martin.repl.co/ Use that to check what I am referring to

CodePudding user response：

I suggest you to use vh and vw point that are relative to screen size:

* {
  padding: 0;
  margin: 0;
}

.myVideo {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
}

Or, you can make container (body tag) 100vw*100vh and your css will work.