如何製作支援 RWD 自動調整大小的 YouTube 嵌入程式碼?

/ /

有時候會有要將 YouTube 影片嵌 (讀音:ㄑ一ㄢ) 入到網站中的需求,只不過系統給的程式碼卻不會自動依網頁上層容器自動調整大小,會擾亂網頁排版。

所以有開發者編寫了一套以網頁為基礎的 YouTube 嵌入程式碼產生器,它會自動加入 RWD 樣式,讓影片區塊自動適應網頁空間。除了 YouTube,它還支援 Vimeo、Dailymotion、Google Maps 等服務的嵌入碼轉換。而且它本身是開源專案、靜態 HTML,你也可以直接下載所有檔案以直接在本機使用產生器。

獲取影片嵌入程式碼

請先打開網頁版 YouTube 影片頁面,點擊網址列複製影片網址。

2020 06 30 13 40 49

貼上網址至產生器中

接下來前往 Embed Responsively 網頁,直接將複製的影片網址貼上至 YouTube Page URL 欄位中,並按下 Embed 按鈕生成。

之後你就能在下方的 Embed code 欄位中取得新的程式碼。複製它,貼到你的文章或頁面當中。

2020 06 30 13 43 18 的螢幕擷圖

嵌入至網站文章頁面

以 WordPress 作為範例,先新增一個「自訂 HTML」區塊後將嵌入碼貼進去,再預覽看看網頁,現在的 YouTube 影音區塊就會依網頁容器大小自動修正了。

2020 06 30 14 02 40 的螢幕擷圖

發表留言

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.