如何讓內嵌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 定義 width
和 height
也是較好的做法,因此也刪去了原來語法中的 width
及 height
。
方法2:使用Inline CSS
適用於少量內嵌物件。其實只是將方法1中的 CSS 合併到 HTML 中。
HTML
方法3:使用Bootstrap
適合已使用Bootstrap的網站,是已內建的功能。
HTML
示範
在電腦版看,可以縮小瀏覽器闊度看示範效果。