如何使視頻適應所有屏幕尺寸？

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;