響應式iframe與最大寬度和高度

Question

我有一個固定高度的容器包含圖像和iframes。爲了使圖像響應和防止縱向和橫向溢出我可以只設置以下CSS：

img { 
    max-width: 100%; 
    max-height: 100%; 
} 

這確保了肖像圖像不會溢出縱向和橫向圖像不會溢出水平。

對於內部框架，我使用的「填充比」 technique，包裝元件的填充設置爲iframe的縱橫比（例如56.25爲16％：9視頻）：

.iframe-wrapper { 
    position: relative; 
    height: 0; 
    padding-top: 56.25%; 
    overflow: hidden; 
} 

.iframe-wrapper iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

雖然這意味着iframe與視口的寬度一起縮放，但如果我更改視口的高度，則它不起作用。基本上我希望iframe能夠模仿圖像的工作方式。

Answer 1

這裏是我覺得它可能爲你工作的修復，但你必須妥協的「填充比」 techniqe，因爲這是沒有必要的;如下）

HTML：

<div class="embeded-video"> 
     <img class="ratio-img" src="http://placehold.it/16x9" alt="16:9 Image" /> 
     <iframe src="//www.youtube.com/embed/I_dN9IpmOZU" frameborder="0" allowfullscreen align="center"></iframe> 
    </div> 

CSS如下：

.embeded-video { 
    position: relative 
} 

.embeded-video .ratio-img { 
    display: block; 
    width: 100% !important; 
    height: auto !important; 
} 

.embeded-video IFRAME { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

演示：http://codepen.io/anon/pen/MYbqgp?editors=110

Answer 2

對於我的用途（從嵌入的Vimeo上一個負責任的現場視頻），這部作品在我所測試的瀏覽器大：

@media screen and (max-width: 750px) { 
    iframe { 
     max-width: 100% !important; 
     width: auto !important; 
     height: auto !important; 
    } 
} 

它不需要圖像佔位符，所以這是一個簡單得多。

Answer 3

此代碼的伎倆對我來說：

<div class="video-container"><iframe.......></iframe></div> 

.video-container { 
    position:relative; 
    padding-bottom:56.25%; 
    padding-top:30px; 
    height:0; 
    overflow:hidden; 
} 

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

來源：https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed