时间戳

首页 > 解决方案 > 如何使用 css 更改 Html 视频的大小

html - 如何使用 css 更改 Html 视频的大小

问题描述

我想知道如何仅使用 css 更改 html 视频的宽度/高度。我是否需要做一些不同于人们通常用css调整对象大小的事情，或者我可以用正常的方式来做。

标签： htmlcsshtml5-video

解决方案

<!DOCTYPE html> 
<html> 
<body> 

<video width="320" height="240"controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>
Video courtesy of 
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>

</body> 
</html>


#vid {
    width: 500px;
    height: 500px;
}
<!DOCTYPE html> 
    <html> 
    <body> 

    <video controls id="vid">
      <source src="mov_bbb.mp4" type="video/mp4">
      <source src="mov_bbb.ogg" type="video/ogg">
      Your browser does not support HTML5 video.
    </video>

    <p>
    Video courtesy of 
    <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
    </p>

    </body> 
    </html>

推荐阅读