現在網站都很喜歡在頁面中塞影片
但影片太大，造成流量負擔，所以很多都會選擇用Youtube影片
再用嵌入的方式掛在網頁中，但總是會有比例上的問題
無法完美解決各種介面的顯示比例
此時可以透過CSS解決等比例縮放問題
<!-- 首先在 iframe 外層包一個 div (yt_video) -->
<div class="yt_video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/K1uuK4QdvGY?si=HLgjT8MZVXx06LLh" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
再透過CSS針對<div>與<iframe>寫樣式即可
.yt_video {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 因為影片寬高比例為 16:9 所以計算出這個百分比數字 56.25% */
}
.yt_video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}