可以使視頻響應，同時擁有最大寬度和最大高度？

我正在嘗試在我的頁面上放置一個視頻，該視頻必須具有響應性（始終爲16：9）。我發現了很多例子，基本上是一樣的（底部填充56.25％填充）。但是，只要我將最大高度和最大寬度應用於iframe（因爲我不希望它填充整個頁面），下面的內容開始移開（由於填充）。可以使視頻響應，同時擁有最大寬度和最大高度？

https://jsfiddle.net/12npu2zu/

#video-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 25px; 
    height: 0; 
} 

iframe { 
    position: absolute; 
    top: 0; 
    margin: 0 auto; 
    left: 0; 
    right: 0; 
    width: 100%; 
    height: 100%; 
    max-width: 1000px; 
    max-height: 563px; 
}

有沒有辦法阻止它這樣做？最大寬度爲1000px，最大高度爲563px（16：9）。

來源

2017-04-07 MortenMoulder

這是你在尋找的，我剛剛結束這一切在一個多格並添加相同的樣式。

<div class="video-holder"> 
    <div id="video-container"> 
     <iframe width="1000" height="563" src="https://www.youtube.com/embed/U4oB28ksiIo" frameborder="0" allowfullscreen>  </iframe> 
    </div> 
    <p>This should stay right underneath the video</p> 
</div>

CSS：

#video-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 25px; 
    height: 0; 
} 

iframe { 
    position: absolute; 
    top: 0; 
    margin: 0 auto; 
    left: 0; 
    right: 0; 
    width: 100%; 
    height: 100%; 
    max-width: 1000px; 
    max-height: 563px; 
} 
.video-holder{ 
    display: inline-block; 
    width: 100%; 
    height: 100%; 
    max-width: 1000px; 
    max-height: 563px; 
}

https://jsfiddle.net/326w5jqj/

來源

2017-04-07 08:47:04

你甚至嘗試調整窗口大小嗎？它溢出窗口，甚至沒有縮小。下面的文字剛剛被拍攝並隱藏起來。 – MortenMoulder

對不起，我更新了答案。 –

DIV-ception。我需要在他們周圍添加另一個DIV，只是爲了讓它居中。質樸。儘管如此，謝謝！ – MortenMoulder

-1

而不是將最大值應用於iframe，應用於容器div。

代碼：

#video-container { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    padding-top: 25px; 
 
    height: 0; 
 
    max-width: 1000px; 
 
    max-height: 563px; 
 
} 
 

 
iframe { 
 
    position: absolute; 
 
    top: 0; 
 
    margin: 0 auto; 
 
    left: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="video-container"> 
 
    <iframe width="1000" height="563" src="https://www.youtube.com/embed/U4oB28ksiIo" frameborder="0" allowfullscreen></iframe> 
 
</div> 
 
<p>This should stay right underneath the video</p>

的jsfiddle - https://jsfiddle.net/213hv2sb/

來源

2017-04-07 08:11:46

這是行不通的。縮放窗口時查看視頻:) – MortenMoulder

-1

所以我落得這樣做將透明圖像在容器中。然後我應用這個CSS到所有的項目：

#video-container { 
    position: relative; 
    width: 100%; 
    max-width: 1000px; 
    margin: 0 auto; 
} 

img { 
    display: block; 
    opacity: 0; 
    width: 100%; 
} 

iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    border: 0 none; 
}

自己去看吧：https://jsfiddle.net/12npu2zu/2/

來源

2017-04-07 08:40:09 MortenMoulder

當您增加寬度尺寸時，文本向左移動。 –

@Leon是的，因爲視頻是居中？ – MortenMoulder

可以使視頻響應，同時擁有最大寬度和最大高度？

回答

相關問題