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

2014/12/23 電腦小教室

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

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

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

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%;
}

你可能對這些內容也有興趣

作者:阿湯

對電腦 & 網路資訊充滿興趣與熱情、瘋了似的每日堅持發文,「阿湯」這個名字是由湯姆克魯斯而來的,雖然我沒有他帥氣,也不會演電影,但我會寫文章....

更多關於的文章》

2 個留言

  1. Meteor表示:

    阿湯你好:我最近也遇上youtube嵌入後高度無法配合,從你的教學獲益良多,用了語法後高度果然配合了,不過用在手機瀏覽網頁時,雖然可以正常撥放,卻被鎖住全螢幕的功能,請問有方可以改善嗎?

    阿湯 說:

    我的蠻正常的耶,這個應該不會鎖

  2. jerry表示:

    您好:我加入了您的語法可是沒有作用,但若是在iframe前再包div卻又可以自適應縮放,請問是哪裡有問題呢? Javascript的部份我加在header.php header之前;這樣對嗎? 謝謝!

    阿湯 說:

    我是正常使用,要看你的網站實際狀況

發表留言 »

姓名(*)
信箱(*)