背景ビデオ応答性

Question

応答性のあるビデオを作成する方法はありますか？
携帯電話では、ビデオが大きすぎます。私はそれにwidth : 100%とheight: autoを与えようとしましたが、白いバーがありました。

Website

Answer 1

それは自動幅に基づいて高さを調整します。

HTML

<div class="flex-video"> 
    <iframe width="420" height="315" src="https://www.youtube.com/embed/V9gkYw35Vws" frameborder="0" allowfullscreen></iframe> 
</div> 

CSS

.flex-video { 
    position: relative; 
    height: 0; 
    padding-bottom: 75%; 
    margin-bottom: 1rem; 
    overflow: hidden; 
} 
.flex-video iframe, .flex-video video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

コードは、私が背景ビデオのためのjQueryライブラリを使用することを好むhttp://foundation.zurb.com/sites/docs/flex-video.html

Answer 2

からコピー。それは完全に動作します。ここに例があります：

http://dfcb.github.io/BigVideo.js/example-ambient.html