设置视频的宽度和高度

问题描述：

我正面临有关视频宽度和高度的问题。现在，它占据了全屏幕，但我希望它的宽度和高度都是我想要的全尺寸。例如，请参阅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; 
}

本视频中存在高度和宽度比率问题。如果我把它的高度降低到70％，它的宽度也会减小。 –

答

看起来好像你试图让视频的宽度比高度更宽。只需将最小高度改为50％即可。

我试过了..不起作用 – chan

这样的事情？ https://jsfiddle.net/kfqe7vgw/ – Edward

答

视频标签具有高度和宽度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％或任何你想要的东西。

不..不工作 – chan

它全屏。它没有设置高度为70％ – chan

我试过你的代码，它工作正常，只是删除最小高度。看到这个小提琴[https://jsfiddle.net/kfqe7vgw/1/](https://jsfiddle.net/kfqe7vgw/1/） – Scarlet

答

只需更改最小宽度：auto;

我认为这会对你有用。

设置视频的宽度和高度

相关推荐