使用css将视频设置为背景

Question

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

＆＃13;

＆＃13;

.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%;
 
}  

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

试一下

.contentContainer {
	position: relative;
	z-index: 2;
	margin: 0 auto;
	max-width: 720px;
	text-align: center;
}
.content__heading {
	margin-bottom: 24px;
	text-align:center;
	color: #FFF;
	font-size: 44px;
}
.content__teaser {
	margin-bottom: 24px;
	color: #FFF;
	font-size: 22px;
}
.content__cta {
	display: inline-block;
	padding: 12px 48px;
	color: #ff3c64;
	font-size: 22px;
	text-decoration: none;
	border: solid 4px #ff3c64;
}
.video {
  width: 100%;

}
.box{ position:absolute;}

<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>
  </div>
<video loop  autoplay preload="none" class="video" >
   <source src="http://dfcb.github.io/BigVideo.js/vids/dock.mp4" type="video/mp4" />
   
 </video>

Answer 2

试试这个。

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

<application
    android:theme="@style/AppTheme">

Answer 3

.homepage-hero-module {
 border-right: none;
 border-left: none;
 position: relative;
}
.no-video .video-container video,
.touch .video-container video {
 display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
display: block !important;
}
.video-container {
position: relative;
bottom: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
background: #000;
}
.video-container .poster img {
 width: 100%;
 bottom: 0;
 position: absolute;
}
.video-container .filter {
z-index: 100;
position: absolute;
background: rgba(0, 0, 0, 0.4);
width: 100%;
}
.video-container .title-container {
z-index: 1000;
position: absolute;
top: 35%;
width: 100%;
text-align: center;
color: #fff;
}
.video-container .description .inner {
font-size: 1em;
width: 45%;
margin: 0 auto;
}
.video-container .link {
position: absolute;
bottom: 3em;
width: 100%;
text-align: center;
z-index: 1001;
font-size: 2em;
color: #fff;
}
 .video-container .link a {
 color: #fff;
}
 .video-container video {
 position: absolute;
 z-index: 0;
 bottom: 0;
 }
 .video-container video.fillWidth {
 width: 100%;
 }

Demo