如何使響應Vimeo嵌入擴大到最大高度？

我使用FitVids使我的Vimeo嵌入響應。我想現在在其中一個嵌入式視頻上設置最大高度。我嘗試了很多不同的方法，並且所有這些方法都因不同的原因而失敗。如何使響應Vimeo嵌入擴大到最大高度？

我有我要見我的解決方案的幾個不同的標準：

在視口中，相對單位
裹在頂部和底部填充的容器嵌入設置一個最大高度
視頻應該始終填充視口的寬度，增加其本身和其父級的高度，除非這會導致它超過最大高度

這裏是a pen with my latest attempt。在這個容器中，容器延伸過視頻。這是因爲響應式嵌入使用填充的方式，但我不確定如何修復它。

這裏的標記：

<div class="video"> 
    <iframe src="https://player.vimeo.com/video/139407849" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
</div>

和CSS：

.video { 
    padding: 6rem 0; 
    background-color: red; 
    overflow: hidden; 
} 

.video iframe { 
    max-height: 80vh ; 
}

一切似乎相當簡單。然後，我在視頻上運行FitVids以使其正確縮放。我能做些什麼來讓我的最高身高在這裏工作？

更新：看起來這種響應式視頻嵌入技術可以對容器的寬度做出響應，但對高度沒有響應。因此，我無法像我所希望的那樣爲使用純CSS的問題找到解決方案。相反，我寫了一些Javascript來計算我需要做的寬度調整，如果我的視頻超過了所需的高度。我仍然喜歡聽到更好的解決方案，但現在這會起作用。

來源

2015-09-17 raddevon

-3

不要嘟my我自己的號角或任何東西，但看看這個。根據要求

https://github.com/mikerodham/responsify

編輯：

這個插件通過自己建將採取任何嵌入影片，使其完全響應，如果嵌入一個div內與類responsify

來源

2015-09-17 23:40:57

請要麼細說這是什麼是否及如何提供幫助，或將其刪除並作爲評論發佈。堆棧溢出不鼓勵鏈接回答。謝謝！ –

我已經這樣做了，我的道歉。 –

@MikeRodham除了應用60％與56.25％的「padding-top」之外，CSS的樣式視頻容器與FitVids完全相同。我嘗試將填充值更改爲您的值，但它沒有解決我的問題。 – raddevon

如何使響應Vimeo嵌入擴大到最大高度？

回答

相關問題