網頁語法-在網頁嵌入youtube影片,可在網頁上直接點選播放

 

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

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

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

原因

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

解決方法

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

要貼什麼語法：

<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：

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

成果：

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

補充說明：

• 若您想作進階設定，請參考Google提供的「YouTube播放器演示」。
• 因在影片的ID後加入「?rel=0」，故只會顯示該頻道的影片，不會顯示其他頻道的影片。若沒有設定「?rel=０」，則影片結束時會根據用戶過去看影片的喜好放推薦影片，讓使用者感覺推薦影片與本校無關。（以前可以用「?rel=0」關掉結束畫面的推薦影片，但2018年9月起被Google改掉了）
• 若您的影片是很久以前拍的4:3影片，用這語法嵌入時，影片左右有黑邊是正常狀況。
• 怎麼在網站首頁放YouTube影片
1. 請點「模組管理」→「自訂模組」新增一個「自訂模組」
2. 編輯自訂模組，選「HTML」
3. 貼入語法並存檔
4. 點「頁面管理」→「首頁畫面設定」→「模組列表」→「常用模組」→「自訂(模組)」選擇剛剛新增的自訂模組→「儲存」，就會放到網站首頁
• 轉貼自 明志科技大學:
• https://lis.mcut.edu.tw/p/406-1013-41640,r1136.php?Lang=zh-tw