如何CSS的響應視頻工作

Question

尋找辦法，使在我的網站響應YouTube視頻，我發現這段代碼的正常工作：

.flex-video { 
    position: relative; 
    padding-top: 25px; 
    padding-bottom: 67.5%; 
    height: 0; 
    margin-bottom: 16px; 
    overflow: hidden; 
} 

.flex-video.widescreen { padding-bottom: 57.25%; } 
.flex-video.vimeo { padding-top: 0; } 

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

不過，我不明白它是如何工作的。我知道，通過使iframe類完全定位並具有100％的寬度和高度，它將佔用容器提供的所有空間。但是容器本身呢？那25px的墊子做什麼？那麼67.5％填充底從哪裏來？由於填充百分數意味着容器的百分比，這個CSS如何在所有容器尺寸上運行良好？

我可以使用不同的數字來更適合我的視頻嗎？如果是，如何？

謝謝。

Answer 1

• 視頻已經position:absolute與overflow:hidden - 將作物出比視頻
• padding-top其他任何額外的內容是用來保持視頻搜索條可見，而不需要一個固定的高度值設置爲容器（價值取決於其您使用的視頻播放器）
• padding-bottom增加了視頻容器的間距，並且是根據視頻的寬高比計算的。如果視頻是使用16：9縱橫比。這意味着：

  16.....100% 
      x 
  9 ...... ? 
  9 * 100/16 = 56,25% 
  

視頻容器高度是視頻容器寬度的56.25%。根據您的寬高比和您嵌入的播放器，您需要調整填充以適合您的視頻。