背景视频

Question

我正在设计一个带有视频背景的网站。页面加载时，视频适合所有屏幕。然后我们滚动，其余网站内容将显示出来。在视频内容上，我想放置标题和一些内容。我需要完全像https://fishermenlabs.com/。请帮我。请在下面检查我的代码。它不起作用。请帮助我。

 <?xml version="1.0" encoding="UTF-8"?><root response="True">
 <movie title="Batman" year="1989" rated="PG-13" released="23 Jun 1989" runtime="126 min" genre="Action, Adventure" director="Tim Burton" writer="Bob Kane (Batman characters), Sam Hamm (story), Sam Hamm (screenplay), Warren Skaaren (screenplay)" actors="Michael Keaton, Jack Nicholson, Kim Basinger, Robert Wuhl" plot="Gotham City. Crime boss Carl Grissom (Jack Palance) effectively runs the town but there's a new crime fighter in town - Batman (Michael Keaton). Grissom's right-hand man is Jack Napier (Jack Nicholson), a brutal man who is not entirely sane... After falling out between the two Grissom has Napier set up with the Police and Napier falls to his apparent death in a vat of chemicals. However, he soon reappears as The Joker and starts a reign of terror in Gotham City. Meanwhile, reporter Vicki Vale (Kim Basinger) is in the city to do an article on Batman. She soon starts a relationship with Batman's everyday persona, billionaire Bruce Wayne." language="English, French, Spanish" country="USA, UK" awards="Won 1 Oscar. Another 8 wins & 26 nominations." poster="https://m.media-amazon.com/images/M/MV5BMTYwNjAyODIyMF5BMl5BanBnXkFtZTYwNDMwMDk2._V1_SX300.jpg" metascore="69" imdbRating="7.6" imdbVotes="302,842" imdbID="tt0096895" type="movie" />
 </root>

请检查我的CSS代码

   <div class="vdbg">   
    <div class="video">  
      <video autoplay muted loop id="myVideo">
       <source src="images/cnk.mov" type="video/mp4">
      </video>
    </div> 
   </div>

Answer 1

背景视频

以下演示的主要思想是，将视频标签与布局的其余部分分开，并将其赋予z-index:-1。对于其余布局，请根据需要进行布局，但请确保视频标记的每个同级都有background:none。

演示

html {
  font: 400 16px/1.5 Verdana;
  height: 100vh;
  width: 100vw;
  padding: 0 2em 0 0;
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100vh;
  width: 100vw;
  background: none;
  padding: 0 2em 0 0;
}

#vid {
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  min-width: 100vw;
  min-height: 100vh;
  opacity: 0.5;
  background-color: #000;
  z-index: -1;
}

main {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: none;
  padding: 0 2em 0 0;
}

header {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  text-align: center;
}

h1 {
  font-size: 5vw;
  line-height: 1.1;
  letter-spacing: 3px;
  white-space: nowrap;
  margin: 0 auto;
}

aside {
  margin: 0 0 0 70vw;
  width: 25vw;
}

summary {
  border: 2px solid #fff;
  font-size: 1.2rem;
}

address {
  font-size: 1em;
}

<video autoplay muted loop id="vid">
       <source src="https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005609.mp4" type="video/mp4">
</video>
<main>
  <aside>
    <details>
      <summary>Contact</summary>
      <address>
        400 Monte Clair St.<br>
        New York, NY 10001<br>
        bytemy@ss.com
      </address>
    </details>
  </aside>
  <header>
    <h1>Main Title That is Long <br>Enough to Wrap Around</h1>
  </header>
</main>

Answer 2

您需要有一个适合屏幕的容器div，然后在视频中添加一个类，以将其调整为宽度或高度。

CSS：

.container {
width: 100%;
height: 100%;
position: absolute;
padding:0;
margin:0;
left: 0px;
top: 0px;
z-index: -1000;
overflow:hidden;
}

.videoPlayer {
    min-height: 100%;
    //min-width:100%; - if fit to width
position:absolute;
bottom:0;
left:0;
}

HTML：

<div class="container"><video class="videoPlayer">Code goes here</video></div>

或阅读此内容。来源：WesBOS

如何使背景视频适合所有屏幕尺寸

2 个答案:

背景视频

演示