分類
網站開發

嵌入回應式YouTube影片

如何讓內嵌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影片

參考資料:

By Alyssa Chan

香港女IT人,宅屬性,陪你發現生活的美好。

發表回覆

你的電郵地址並不會被公開。 必要欄位標記為 *