基於新舊版的切換或更換不同模板風格時；其網頁文章區塊的寬度會有所不同，所以將 YouTube 影片嵌入在文章裡最好不要直接指定寬度與高度，不然網頁顯示時會有不對齊、破框、黑邊等問題產生，且不可能為了調整文章版面而逐一修改有嵌入 YouTube 影片的文章，為了一勞永逸免除日後維護的麻煩，就必需建構能讓嵌入 YouTube 影片寬高自適應的方法。

▼首先得添加下面的 CSS：

/**

 * 文章嵌入 YouTube 影片寬高自適應

 */

.youTube16_9 {

	position: relative;

	width: 100%;

	height: 0;

	padding-bottom: 56.25%; /* 寬高比 16:9 */

}



.youTube9_16 {

	position: relative;

	width: 100%;

	height: 0;

	padding-bottom: 177.77%; /* 寬高比 9:16 */

}



.youTube4_3 {

	position: relative;

	width: 100%;

	height: 0;

	padding-bottom: 75%; /* 寬高比 4:3 */

}



.youTube1_1 {

	position: relative;

	width: 100%;

	height: 0;

	padding-bottom: 100%; /* 寬高比 1:1 */

}



.youTube16_9 iframe,

.youTube9_16 iframe,

.youTube4_3 iframe,

.youTube1_1 iframe {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	border-radius: 10px; /* 園角 */

	box-shadow: 5px 5px 15px #9b8f8f; /* 陰影 */

}

▼再將 YouTube 影片 ID 代入 下面的 HTML：

<!-- 以 16:9 影片格式為例 -->

<div class="youTube16_9">

	<iframe src="https://www.youtube.com/embed/影片ID" frameborder="0" allowfullscreen="true">

	</iframe>

</div>

▼顯示 16:9 寬高比影片

▼顯示 9:16 寬高比影片

▼顯示 4:3 寬高比影片

▼顯示 1:1 寬高比影片