CSS - 流動寬度視頻與最大高度100％窗口

我正在尋找一種CSS方式來嵌入一個響應式視頻（iframe），使其高度始終是窗口的100％，寬度適應任何比率允許。我能找到的關於此事的內容大致相反（this technique的變體）。CSS - 流動寬度視頻與最大高度100％窗口

因此，理想情況下是像

.videoContainer { 
    height: 100%; 
    width: auto; 
    max-width: 90%; // Bonus : I need the video not to be 100% width 
    display: inline-block; 
    position: relative; 
} 

.videoContainer::after { 
    padding-top: 56.25%; 
    display: block; 
    content: ''; 
} 

.videoContainer>iframe{ 
    width:100%; 
    height:100%; 
    position:absolute; 
    top:0; 
    left:0; 
}

我不知道它甚至有可能。最好不要JS。

來源

2016-02-17 kursus

[此帖]（http://stackoverflow.com/a/20593342/703717）可以幫助...接近尾聲這裏還有一個例子90％寬度 – Danield

這太棒了。非常感謝你。 – kursus

完美的答案感謝到Danield在this post：

iframe { 
    width: 90vw; /* 90% of viewport vidth */ 
    height: 50.625vw; /* ratio = 9/16 * 90 = 50.625 */ 
    background: pink; 
    max-height: 90vh; 
    max-width: 160vh; /* 16/9 * 90 = 160 */ 
    margin: auto; 
    position: absolute; 
    top:0;bottom:0; 
    left:0;right:0; 
}

來源

2016-02-17 02:46:31 kursus

CSS - 流動寬度視頻與最大高度100％窗口

回答

相關問題