Question

我想知道将视频用作背景的好方法，例如在Square Cash中使用：https://square.com/cash

Answer 1

<div id="video-container">
<video autoplay loop poster="http://media.w3.org/2010/05/sintel/poster.png" muted="muted">
                    <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
                    <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
                    <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
                    Your browser does not support the video tag. I suggest you upgrade your browser.
                </video>
</div><!-- end video-container -->




#video-container {
    top:0%;
    left:0%;
    height:100%;
    width:100%;
    overflow: hidden;
        position: absolute;
}
video {
    position:absolute;
    z-index:0;
        width: 100%;
}

Answer 2

为视频添加了{{1}}，使其表现得像object-fit: cover;

background-size: cover;

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.videobg {
  height: 100vh;
  overflow: hidden;
  padding: 5vh;
  position: relative; /* requires for to position video properly */
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  object-fit: cover; /* combined with 'absolute', works like background-size, but for DOM elements */
}

使用视频作为背景

2 个答案: