Question

我正在使用HTML + CSS构建网站。我试图使用视频作为我网站的背景。问题是我的视频的左右两侧有些乏味。

我尝试使用宽度100％和高度100％，宽度和高度100vh和100vw，以及最小宽度和最小高度100％，但视频的左侧和右侧仍然有一些剩余空间< / p>

.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="highlight.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>

我希望视频可以全屏显示。

Answer 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>

您可以随意放置视频

Answer 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>

我希望这能解决您的问题。

如何修复“视频未全屏显示”

2 个答案: