嵌入回應式YouTube影片

2016-09-25

Responsive Website Design 回應式網頁設計

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

參考資料:

免費按讚支持創作

喜歡我的文章,請在下面按讚 5 下,助我得到 LikeCoin 獎賞,支持我繼續創作免費內容。

行有餘力,可以成為我的讚賞公民,每月送我一杯咖啡,從此每份贊助,都會化成實質支持。

作者簡介

香港斜槓族,喜歡學習的宅女。打工時期做過行銷、教育及IT行業。自學技能包括:網站開發、網路行銷、影片製作、平面設計等。

希望透過內在自我認知及外在技能培養的分享,幫助網路創業者實現理想生活,共建和諧美好的世界。

提交評論

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

本網站受 reCAPTCHA 保護,並適用 Google 隱私政策服務條款