如何使视频对所有屏幕尺寸都有响应？答案

【问题标题】：How to make video responsive for all the screen sizes?如何使视频对所有屏幕尺寸都有响应？
【发布时间】：2016-05-04 13:29:26
【问题描述】：

首先，视频有点缩放，我希望它适合整个屏幕。除此之外，我不知道如何让视频在所有屏幕尺寸上都具有响应性。

HTML

<div class="spread-video">
  <video src="https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/video/landingpage.mp4" autoplay="" loop="">
  </video>
</div>

CSS

.spread-video {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

有人知道如何做到这一点吗？提前谢谢！

【问题讨论】：

如果视频的宽高比与屏幕不同，那么您将以一种或另一种方式引入裁剪。
@Quantastical 我可以使用 CSS 让它看起来更小吗？
embedresponsively.com 您可以调整 youtube embed 的代码以使用 video 标签。
我添加了 Codepen 沙盒来玩游戏

标签： css html

【解决方案1】：

定位<video>而不是父div，参见小提琴：https://jsfiddle.net/m1pz6zcu/4/

.spread-video > video {
  width: 100%;
}

由于视频的纵横比与视口的宽高比不同，解决此问题的方法是使视频宽度大于视口宽度，居中并隐藏溢出。见小提琴：https://jsfiddle.net/m1pz6zcu/6/

.spread-video > video {
  width: 200%;
  margin-left: -50%;
}
.spread-video{
  overflow: hidden;
}

【讨论】：

在较大的显示器上，我可以看到底部的间隙。似乎高度没有反应。有没有办法解决这个问题？
您也可以在其中使用 height:100% 但是您会在视频的每一侧看到黑条，因为它试图保持其纵横比。
@BillyLogan 唯一的其他选择是使视频大于视口，因为视频的纵横比将始终保持不变。
@BillyLogan 见小提琴jsfiddle.net/m1pz6zcu/5 我将视频设置为 150% 宽度并将其向左移动 -25% 以使其居中。
@AdamBuchananSmith 这个解决方法对我来说足够合适，因为我没有视频编辑技能。太感谢了。我会记住，下次我需要与屏幕具有相同纵横比的视频。你能在答案中提供这个吗？

【解决方案2】：

添加以下css

.spread-video video {
  width:100%;  
}

【讨论】：

在较大的显示器上，我可以看到底部的间隙。有没有什么办法解决这一问题？似乎高度没有响应。

【解决方案3】：

https://jsfiddle.net/mlegg10/fsftz8rt/4/

/* Flexible iFrame */

.flexible-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.flexible-container iframe,
.flexible-container object,
.flexible-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe src="https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/video/landingpage.mp4" frameborder="0" style="border:0"></iframe>
</div>

【讨论】：

【解决方案4】：

试试这个

position: relative;

padding-bottom: 56.25%; /* 16:9 Aspect Ratio */

padding-top: 25px;

或者这个

position: absolute;

width: 100%!important;

height: 100%!important;

【讨论】：