全宽视频大于 html5 中的屏幕尺寸

Posted 2023-05-07

【中文标题】全宽视频大于 html5 中的屏幕尺寸

【英文标题】：Full width video is larger than screen size in html5

【发布时间】：2020-04-21 10:39:33

【问题描述】：

我有一个标题为全宽的视频，视频的宽度设置为 100%。问题是高度，我的视频很大，我看不到视频的控件。我需要滚动才能看到控件。我的问题有什么解决办法吗？

<video    controls >
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

我试图通过将高度设置为自动或 100% 来实现这一点，但桌面上的视频仍然很大，而且我看不到控件。请任何想法如何解决这个问题？有没有办法让视频适合屏幕尺寸。这样我就不需要滚动了？

【问题讨论】：

max-height: 100vh ?

@DominikMatis 我试试这个，但是我的视频不是全宽，高度还可以，但宽度不是

高度：100vh；宽度：100vw;

这能回答你的问题吗？ Video 100% width and height

width + height 和 drafts.csswg.org/css-images-3/#propdef-object-fit 可以帮助你。屏幕不会缩小或扩大到视频比例，您必须对其进行剪辑或减小其宽度或高度以适合您希望在屏幕上看到的区域。

【参考方案1】：

您可以使video 同时具有width: 100% 和height: 100% 或height: 100vh，并且内容（视频本身）将被调整大小和居中，保持纵横比，所以只需确保添加一个@ 987654325@填补空白：

body 
  margin: 0;


.somethingElse 
  position: relative;
  width: 100%;
  height: 50vh;
  background: red;


video 
  position: relative;
  width: 100%;
  height: 100vh; 
  background: black;
  display: block;
  outline: none;

<div class="somethingElse"></div>

<video controls >
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

<div class="somethingElse"></div>

【参考方案2】：

您的视频存在纵横比问题，这就是为什么如果您使用 100% 宽度，则会出现滚动条。如果需要全屏，您可以为视频使用 4:3 或 16:9 的比例，而不会影响宽度和高度。