html - 使用CSS将视频设置为背景

Question

我想将视频设置为特定 div 的背景，并且需要显示页面内容所需的滚动条 ID，文本和图标要显示在背景视频上。 现在视频显示在右下角。

.contentContainer {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
}

.content__heading {
  margin-bottom: 24px;
  color: #272727;
  font-size: 44px;
}

.content__teaser {
  margin-bottom: 24px;
  color: #595959;
  font-size: 22px;
}

.content__cta {
  display: inline-block;
 
  padding: 12px 48px;
  color: #ff3c64;
  font-size: 22px;
  text-decoration: none;
  border: solid 4px #ff3c64;
}

.video {
  position: fixed; 
  z-index: 1;
   width: auto;
  height: auto;
 top: 50%; 
  left: 50%; 
  min-width: 100%;
 
}  

<div class="sample" style="min-height:100px;background-color:blue;">
 sdadjsa gsahd sadgh asgd
 </div>
<div class="col-md-4 box">
   <h4></h4>
   <div class="contentContainer">
      <div class="content__heading">
	   headeing dsfgds sdfhjsd sd dsfgsdfg dgfgjg
	  </div>
	  <div class="content__teaser">
        <img src="sample.jpg" alt="demo">
	  </div>	
   </div>
   <video loop  autoplay preload="none" class="video" ><source src="http://dfcb.github.io/BigVideo.js/vids/dock.mp4" type="video/mp4" /></video>
   
</div>

Answer 1

试试这个。

.contentContainer {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
}

.content__heading {
  margin-bottom: 24px;
  color: #272727;
  font-size: 44px;
}

.content__teaser {
  margin-bottom: 24px;
  color: #595959;
  font-size: 22px;
}

.content__cta {
  display: inline-block;
 
  padding: 12px 48px;
  color: #ff3c64;
  font-size: 22px;
  text-decoration: none;
  border: solid 4px #ff3c64;
}

.video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
	background-size: cover;
	transition: 1s opacity; 
}  

<div class="sample" style="min-height:100px;background-color:blue;">
 sdadjsa gsahd sadgh asgd
 </div>
<div class="col-md-4 box">
   <h4></h4>
   <div class="contentContainer">
      <div class="content__heading">
	   headeing dsfgds sdfhjsd sd dsfgsdfg dgfgjg
	  </div>
	  <div class="content__teaser">
        <img src="sample.jpg" alt="demo">
	  </div>	
   </div>
   <video loop  autoplay preload="none" class="video" ><source src="http://dfcb.github.io/BigVideo.js/vids/dock.mp4" type="video/mp4" /></video>
   
</div>