︿
✖ CLOSE

YouTube 響應式網頁(RWD)製作方法教學

1 年 之前│
Jin

許多人會將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),也可以套用此方法來使用。

▪ 相關文章