如何讓內嵌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
示範
在電腦版看，可以縮小瀏覽器闊度看示範效果。