2016-07-24 11 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/不安定/ペン/ 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>

関連する問題