youtube 以iframe嵌入網頁符合自適應RWD

 網頁版面為

<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>

CSS樣式

.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:以區塊對角線的比例來設定隨螢幕大小自動伸縮的背景圖