2016-07-24 64 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>