跳到主要內容區

在網頁嵌入影片請勿使用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=0」,則影片結束時會根據用戶過去看影片的喜好放推薦影片,讓使用者感覺推薦影片與本校無關。(以前可以用「?rel=0」關掉結束畫面的推薦影片,但2018年9月起被Google改掉了)

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

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

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

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

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

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

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

瀏覽數:

回到「校園網頁管理」看更多網頁管理說明