網頁版面為
CSS樣式<div class="videoWrapper"> <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/影片ID" title="YouTube video player" width="560"></iframe> </div>
.videoWrapper{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .videoWrapper iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }參考:
16:9的比例為 56.25%
4:3的比例為 75%
相關:
RWD:以區塊對角線的比例來設定隨螢幕大小自動伸縮的背景圖