2016-07-24 28 views
-1

即我想给一个视频,而不是在网站的首页滑块或横幅图像。在下面的代码中,我想仅将视频作为背景应用到“视频”课程,我该怎么做才能帮助我,谢谢。如何仅为特定的div或类提供背景视频。

<body> 
    <div class="video"> 
     <nav> 
     </nav> 
     <div class="some-text"> 
      <h1> welcome </h1> 
     </div> 
    </div> 

    <div class="container"> 

     <!-- here there other content of the site where the video should not appear in background --> 

    </div> 

</body> 
+0

我尝试浏览帮助解决你这可能会帮助你 [全屏HTML5页面背景视频](https://codepen.io/ dudleystorey /笔/ knqyK) – saiful

回答

0

试试这个

var myVideo = document.getElementById("vd"); 
 
myVideo.play();
.videoBg { 
 
    overflow: hidden; 
 
} 
 

 
.videoBg video{ 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
} 
 

 
video{ 
 
    width:100%; 
 
    height:100%; 
 
}
<body> 
 
    <div class="videoBg"> 
 
     <video id="vd"> 
 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
 
Your browser does not support the video tag. 
 
</video> 
 
    </div> 
 

 
    <div class="container"> 
 
your content 
 
     <!-- here there other content of the site where the video should not appear in background --> 
 

 
    </div> 
 

 
</body>