我正在寻找一种CSS方式来嵌入一个响应视频（iframe），这样它的高度总是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;
}
我甚至不确定这是否可能。最好不要。
完美的答案感谢丹尼尔在这篇文章：
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;
}
