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

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

Answer 2

视频标签的宽度和高度属于，所以基本上你可以使用这个：

<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;

我认为这对你有用。

设置视频的宽度和高度

3 个答案: