作者簡介
寫好每一篇文章讓各位都能學習到各種小知識,希望大家會喜歡!
許多人會將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影音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),也可以套用此方法來使用。
喜歡這篇文章的話
請按個讚或者分享支持一下!
喜歡這篇文章的話
請按個讚或者分享支持一下!
最新的教學及情報資訊都在INMAG!