Question

首先，视频有点缩放，我喜欢它适合整个屏幕。除此之外，我无法弄清楚如何对所有屏幕尺寸进行视频响应。

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

有人知道如何实现这个目标吗？提前谢谢！

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

Answer 2

添加以下css

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

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

Answer 4

试试这个

position: relative;

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

padding-top: 25px;

或者这个

position: absolute;

width: 100%!important;

height: 100%!important;

如何使视频响应所有屏幕尺寸？

4 个答案: