跳到主要內容區
  1. 首頁
  2. 即時消息RSS

在網頁嵌入影片請勿使用YouTube提供之嵌入語法，請使用內文提供的響應式語法，才能在手機正常顯示

發佈日期 : 2019-12-17 最後更新日期 : 2022-05-25

2022/5/25：調整文字說明

在網頁嵌入影片請勿使用YouTube提供之嵌入語法：

原因

  1. YouTube提供的嵌入語法沒有作響應式（RWD）設計，導致電腦看影片很正常，手機看影片時右半會被切掉。
  2. YouTube提供的嵌入語法在影片結束時，會根據用戶過去看影片的喜好放推薦影片，讓使用者感覺推薦影片與本校無關。

解決方法

請先找到影片的ID：

  1. 打開YouTube影片
  2. 點選「分享」會顯示影片網址，第三個斜線右邊那串就是影片的ID。例如影片網址為「https://youtu.be/SzvVIYW3CH0」，則「SzvVIYW3CH0」就是影片的ID

把影片的ID放進以下語法的「影片的ID」：

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe width='560' height='315' src='https://www.youtube-nocookie.com/embed/影片的ID?rel=0' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></div>

放進「影片的ID」後的語法：

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe width='560' height='315' src='https://www.youtube-nocookie.com/embed/SzvVIYW3CH0?rel=0' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></div>

把語法貼到網頁後台：

  1. 編輯網頁，點選「HTML」，貼入語法並存檔。
  2. 或編輯網頁，點選「HTML」→開啟「HTML編輯器」→點工具列左上角的「原始碼」，貼入語法並存檔。

成果

  1. 嵌入之影片有作響應式（RWD）設計，電腦和手機看影片都很正常，影片不會被切掉。
  2. 影片結束時，只會推薦與影片同一YouTube頻道的影片。

Q&A

Q1：我想做進階設定
A1：請參考Google提供的「YouTube播放器演示」。

Q2：影片ID後面的「?rel=0」是做什麼用的？可以刪掉嗎？
A2：因在影片的ID後加入「?rel=0」，故只會顯示該頻道的影片，不會顯示其他頻道的影片。若沒有設定「?rel=０」，則影片結束時會根據用戶過去看影片的喜好放推薦影片，讓使用者感覺推薦影片與本校無關。（以前可以用「?rel=0」關掉結束畫面的推薦影片，但2018年9月起被Google改掉了）

Q3：使用這語法時，怎麼有些影片在左右有黑邊
A3：若您的影片是很久以前拍的4:3影片，用這語法嵌入時，影片左右有黑邊是正常狀況

Q4：我想在網站首頁嵌入YouTube影片
A4：請依照下列步驟

  1. 請點「模組管理」→「自訂模組」新增一個「自訂模組」
  2. 編輯自訂模組，選「HTML」
  3. 貼入語法並存檔
  4. 點「頁面管理」→「首頁畫面設定」→「模組列表」→「常用模組」→「自訂(模組)」選擇剛剛新增的自訂模組→「儲存」，就會放到網站首頁

實作範例-使用響應式語法：

  1. 請用手機看網頁，可以發現影片正常顯示，因為有作響應式（RWD）設計。
  2. 影片結束後，不會推薦與本校無關的影片。

對照組：使用YouTube提供之嵌入語法

  1. 請用手機看網頁，可以發現影片右半部被裁切掉，因為沒有作響應式（RWD）設計。
  2. 影片結束後，會推薦與本校無關的影片。

瀏覽數:
友善列印