ビデオの幅と高さを設定する

Question

ビデオの幅と高さに問題があります。今はフルスクリーンを占めていますが、私はそれがフルサイズで幅と高さを設定したいと思っています。たとえば、http://airbnb.comを参照してください。もし誰かが私を助けることができたら。ありがとう

<div align="center"> 
<video autoplay loop id="video" class="con"> 
    <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> 
</video> 
<div class="overlay"> 
    <form> 
     <label for="input">Form Input Label</label> 
     <input id="input" name="input" value="" /> 
     <button type="submit">Submit</button> 
    </form> 
</div> 
</div> 

これは私が使用しているCSSです。

.con { 
position: fixed; 
top: 50%; 
left: 50%; 
min-width: 100%; 
min-height: 100%; 
width: auto; 
height: auto; 
transform: translateX(-50%) translateY(-50%); 
transition: 1s opacity; 
} 

.overlay { 
position:absolute; 
top:0; 
left:0; 
z-index:1; 
} 

Answer 1

ビデオの幅を高さよりも広げようとしているようです。 min-heightを50％のようなものに変更してください。

Answer 2

videoタグはとても基本的に、あなたはこの1つを使用することができ、幅と高さattributを持っています

<video autoplay loop id="video" class="con" width="320" height="240"> 
    <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> 
</video> 

はw3schools

上より見て、あなたのCSSスタイルをもとに、あなたが必要とする一つのことは、削減することです70％のような何かに、またはあなたが何を望むものであれ、最小の高さ。

Answer 3

min-width：autoを変更するだけです。

これはあなたのために働くと思います。