如何更改HTML CSS中视频的高度?

本文介绍了如何更改HTML CSS中视频的高度?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

每当我更改视频的高度时，我也必须在其页面上以100％的宽度和400px或500px的高度显示视频，同时也更改了我不需要的宽度.而且我还必须显示全屏视频移动设备.

I have to display video on my page with 100% width and 400px or 500px height whenever i am changing the height of the video it also changing the width that i don't want. and i have to also display full screen video mobile device also.

请帮助我.

<div class="video-size">
<video  autoplay loop controls muted>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
</div>

CSS

.video-size
{
  width: 100%;
  height: 400px;
}

推荐答案

希望这将解决长宽比问题.

Hope this will resolve the aspect ratio problem.

HTML:

<video autoplay muted loop id="myVideo">
    <source src="videos/Raindrops.mp4" type="video/MP4">
</video>

CSS:

#myVideo {
    width: 100%;
    height: 600px;
    object-fit: cover;
    z-index: -100;
}

这篇关于如何更改HTML CSS中视频的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！