如何讓網頁嵌入的 YouTube 可以自適應解析度縮放

網頁做成 responsive（自適應）在現在似乎是已經見怪不怪了，最近阿湯也將手機版做了改版，不過先前在手機版的 YouTube 嵌入框是直接設定一個寬高讓他縮小，在這次改版思考了一下，手機現在尺吋包羅萬像，所以就將 YouTube 修改為可自適應縮放，也順便自己做了個筆記，相信有不少人也都沒有針對 YouTube 做自適應，下面就提供阿湯的做法給大家參考，有需要的就夾去配吧。

如何讓網頁的 YouTube 可以自適應解析度縮放：

要像這樣在手機網站上自由縮放 YouTube，其實在網路上有很多文章可以參考，做法各有不同，有很多都是額外加上 div 去控制，但如果有舊的嵌入碼你也不可能再一個個去往前修改，所以下面提供的方式是直接針對 iframe  YouTube 語法有效，往下來看吧。

首先在網站的</head>之前加入以下的 Javascript。

Javascript 的部份：

<script type=”text/javascript”>
$(document).ready(function () {
$(‘iframe[src*=”youtube.com”]’).wrap(‘<div class=”youtubecontent” />’);
});
</script>

然後再加入 CSS 就可以囉，很簡單吧，去試看看，如果想要看看成效，你可以用手機瀏覽就是教不落試看看，像是這篇就有內嵌 YouTube。

CSS 的部份：

.youtubecontent{
position: relative;
padding-top: 30px; height: 0; overflow: hidden;
}
.youtubecontent{
padding-bottom: 56.25%;
}
.youtubecontent iframe,
.youtubecontent object,
.youtubecontent embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}