html代碼如下
<divclass="resp-container">
<iframeclass="resp-iframe"src="https://www.youtube.com/embed/dQw4w9WgXcQ"gesture="media"allow="encrypted-media"allowfullscreen></iframe>
</div>
使用以下樣式定義包裝類:
.resp-container{
position:relative;
overflow:hidden;
padding-top:56.25%;
}
position:relative和iframe的位置在這裡非常重要。position:relative以便稍後我們可以将iframe與包裝元素相關聯。這是因為在CSS中,position:absolute基于最接近的非靜态父元素定位元素。
overflow:hidden是否隐藏任何可能放在容器外面的元素。
padding-top:56.25%這就是關鍵所在。在CSS中,padding-top屬性可以設定百分比,這使我們的iframe保持正确的比例。通過使用百分比,它将根據元素的寬度計算要使用的填充。在我們的示例中,我們希望保持56.26%的比率,也可以使用其他比率。
按如下方式定義iframe類:
.resp-iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0;
}
position:absolute;這将為iframe提供相對于包裝器的位置,并将其放置在包裝器的填充上。
top:0并left:0用于将iframe定位在容器的中心。
width:100%并且height:100%使IFRAME采取所有包裝的空間。