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

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

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

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

獲取影片嵌入程式碼

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

貼上網址至產生器中

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

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

嵌入至網站文章頁面

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

comments powered by Disqus