YouTube 響應式網頁（RWD）製作方法教學

許多人會將YouTube影音或者Google Maps嵌入至網頁內，隨著現在響應式網頁（RWD）的流行，將影音、地圖嵌入前就是必要先改成適合手機版觀看的方式，因為YouTube是以16:9比例播放、Google Maps是4:3比例的關係，所以直接使用100%去做縮放會整個變形，所以要使用其他方法才能將YouTube影音、Google Maps改成響應式網頁。

所謂的響應式網頁是什麼？

響應式網頁（RWD）簡單來說就是能依照載具（例如：PC版、手機版、平板等等…觀看網頁）的不同，以等比例的方式縮放文字、圖片、影音來達到可以兼容載具的效果。

常見的比例用在何種螢幕上？

4:3：傳統螢幕大多是以此規格比例，不過像是平板也是會使用此種比例，像是iPad的7.9吋(2048×1536)、9.7吋(2048×1536)、10.5吋(2224×1668)…等等。

16:9、16:10：目前主流大多是以此兩種HD顯示器規格比例，像是Macbook Pro13吋就是以16:10(2560x 1600、1680×1050、1440×900、1024×640)，螢幕較寬。

如何辨認螢幕解析度是哪種比例？

要計算比例其實很簡單，首先可以先參考此篇維基百科顯示分辨率列表文章內的最上方數字。

1.25 = 5∶4 比例
1.3~ = 4∶3 比例
1.5 = 3∶2 比例
1.6 = 8∶5 = 16∶10 比例
1.6~ = 5∶3 比例
1.7~ = 16∶9 比例

得知道這些數字之後其實很簡單，隨便先拿一個解析度寬度560、高度315來計算。

560 ÷ 315 = 1.77777

所以根據上面的數字來說，無法整除所以就是1.7~就是16:9比例。

那麼試著計算看看YouTube、Google Maps螢幕比例看看：

YouTube影音嵌入時是以16:9比例嵌入，例如：寬度560、高度315就是16:9螢幕解析度。

<iframe width="560" height="315" src="https://www.youtube.com/embed/nD_wG-OUZUo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Google Map則是以4:3比例嵌入，例如：寬度600、高度450就是16:9螢幕解析度。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3747578.265590554!2d117.83988309276266!3d23.469682562992126!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346ef3065c07572f%3A0xe711f004bf9c5469!2z5Y-w54Gj!5e0!3m2!1szh-TW!2stw!4v1538902363989" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

YouTube、Google Maps該如何嵌入呢？

YouTube影音RWD嵌入方法

先加入以下(A)、(B)兩段CSS語法，此為Youtube嵌入RWD語法

(A)段

.youtube-rwd {
position:relative;
height:0;
padding-bottom:56.25%;
overflow:hidden
}

(B)段

.youtube-rwd iframe,
.youtube-rwd object,
.youtube-rwd embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%
}

使用<div>放在YouTube嵌入語法外面：

<div class="youtube-rwd"><iframe width="560" height="315" src="https://www.youtube.com/embed/nD_wG-OUZUo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>

呈現會是這樣：

說明一下：

(A)段設定position:relative;相對定位，其中的padding-bottom:56.25%;為向底部往下延伸空間至符合16:9的比例。

算法為：

16:9 = 9 ÷ 16 = 0.5625

0.5625 x 100% = 56.25%

(B)段設定iframe、object、embed為position:absolute;絕對定位，設定width:100%;、height:100%、top:0;(定位在最上方不會移動)、left:0px;(定位在左邊不會移動)確保不會影響到(A)。

所以(B)段只會在(A)段內延伸，不會影響到已經設定的大小。

Google Maps地圖RWD嵌入方法

做法跟YouTube方法一樣，只需要修改(A)段padding-bottom內的數字及刪掉padding-top:30px;，接著會再詳述一次！

先加入以下(A)、(B)兩段CSS語法，此為Google Maps嵌入RWD語法

(A)段

.googlemap-rwd {
position:relative;
height:0;
padding-bottom:75%;
overflow:hidden
}

(B)段

.googlemap-rwd iframe,
.googlemap-rwd object,
.googlemap-rwd embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%
}

使用<div>放在Google Maps嵌入語法外面：

<div class="googlemap-rwd"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3747578.265590554!2d117.83988309276266!3d23.469682562992126!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346ef3065c07572f%3A0xe711f004bf9c5469!2z5Y-w54Gj!5e0!3m2!1szh-TW!2stw!4v1538902363989" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></div>

呈現會是這樣：

說明一下：

(A)段設定position:relative;相對定位，其中的padding-bottom:75%;為向底部往下延伸空間至符合16:9的比例。

算法為：

4:3 = 3 ÷ 4 = 0.75

0.75 x 100% = 75%

(B)段設定iframe、object、embed為position:absolute;絕對定位，設定width:100%;、height:100%、top:0;(定位在最上方不會移動)、left:0px;(定位在左邊不會移動)確保不會影響到(A)。

所以(B)段只會在(A)段內延伸，不會影響到已經設定的大小。

當然除了Youtube及Google Maps這兩種之外，要將其他比例製作成響應式網頁（RWD），也可以套用此方法來使用。