嵌入回應式YouTube影片 | RWD網頁設計

25.9.16

嵌入回應式YouTube影片教學
如何讓內嵌YouTube影片完美地顯示在手機版網頁?


這是YouTube預設的嵌入語法:

<iframe width="560" height="315" src="https://www.youtube.com/embed/D6Ac5JpCHmI" frameborder="0" allowfullscreen></iframe>

由於設定了闊 × 高 = 560 × 315 (px),在手機上看網頁,一般都會超出了可視範圍,UX非常差。其實只要加上CSS設定,便可輕易解決問題。

方法1:自建CSS

此方法適合有不少內嵌物件的網站,能減少重覆的CSS語法。

CSS


第3行中的 56.25% 是物件的高度比例,由於現代的影片闊度與高度的比例多數是 16:9,因此比例 = 9 ÷ 16 = 0.5625 = 56.25%。因此,如果是舊式 4:3 影片,則用 75%。

HTML


注意:由於 HTML5 已不支援 frameborder 屬性,請刪除 frameborder="0"。在 CSS 中加入 border: 0 none; 以去掉框線。
另外,以 CSS 定義 widthheight 也是較好的做法,因此也刪去了原來語法中的 widthheight


方法2:使用Inline CSS

適用於少量內嵌物件。其實只是將方法1中的 CSS 合併到 HTML 中。

HTML



方法3:使用Bootstrap

適合已使用Bootstrap的網站,是已內建的功能。

HTML



示範

在電腦版看,可以縮小瀏覽器闊度看示範效果。

YouTube影片



Vimeo影片




本文參考:

您或許喜歡

0 意見

精選文章

釋放C Drive空間:更改iTunes備份位置 | 電腦技巧 (2018.10.17更新)

最近電腦常警告我儲存空間不足!自問沒有安裝新程式,文件又全都儲存在 D Drive,到底容量都去哪了?終於發現因妹妹備份iPhone的緣故。於是找了解決方法,希望幫到遇上同樣問的的朋友。

Facebook