搜尋

網頁中嵌入 YouTube 影片

YouTube 是目前全球最大的線上影音平台,這篇教學會介紹如何透過 HTML 的實作,將 YouTube 嵌入到網頁中,在網頁裡就能播放 YouTube 影片或影片清單。

快速導覽:

HTML 教學 - 網頁中加入 YouTube

嵌入 YouTube 影片

前往 YouTube 尋找一部自己喜歡的影片,找到後點擊下方的「分享」按鈕。

HTML 教學 - 網頁中加入 YouTube - 分享按鈕

點擊後選擇「嵌入」,也可勾選指定影片開啟時間。

HTML 教學 - 網頁中加入 YouTube - 嵌入

點擊後會出現 YouTube 嵌入的程式碼,點擊「複製」就能複製全部的程式碼,往下拉會有「顯示播放器控制選項」( 是否出現播放器 ) 和「啟用隱私權加強保護模式」,兩個選項都使用預設值即可 ( 兩個選項都可以透過程式碼的屬性修改 )。

HTML 教學 - 網頁中加入 YouTube - 複製嵌入的程式碼

複製程式碼之後,開啟自己的 HTML 檔案,將程式碼貼到 <body> 裡,網頁中就會出現嵌入的 YouTube 影片。

<iframe width="560"
  height="315"
  src="https://www.youtube.com/embed/WjJZufaOv3o"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

嵌入 YouTube 影片清單

前往 YouTube 尋找自己喜歡的影片清單,找到後進入影片清單,點擊下方的「分享」按鈕。

HTML 教學 - 網頁中加入 YouTube - 找到喜歡的影片清單

點擊後選擇「嵌入」。

HTML 教學 - 網頁中加入 YouTube - 嵌入影片清單

複製程式碼之後,開啟自己的 HTML 檔案,將程式碼貼到 <body> 裡,網頁中就會出現嵌入的 YouTube 影片清單。

<iframe width="560"
  height="315"
  src="https://www.youtube.com/embed/videoseries?list=PL9ACDjBMkp9yt-ljgN_oGiEWBfUmxEQsW"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

YouTube iframe 屬性說明

嵌入 YouTube 之後,可以透過 iframe 的屬性設定 YouTube 影片,下方列出常用的屬性與說明:

屬性 說明
width 寬度 ( 可使用 CSS 取代 )。
height 高度 ( 可使用 CSS 取代 )。
src YouTube 影片網址,若網址從 youtube 為 youtube-nocookie 表示啟用隱私權加強保護模式。
title YouTube 影片標題。
frameborder iframe 邊框 ( 可使用 CSS 調整 )。
allow YouTube 影片預設允許的功能 ( 可移除 )。
allowfullscreen 是否允許全螢幕播放,移除則不能全螢幕播放。

直接在 YouTube src 網址後方加上對應參數,就能替嵌入的 YouTube 加上對應的功能,常用的參數和說明如下:

參數 說明
start 從第幾秒開始播放 ( 正整數 )。
autoplay 0 不自動播放 ( 預設 ),1 自動播放。
controls 0 沒有播放控制器,1 有播放控制器 ( 預設 )。
disablekb 0 停用鍵盤控制,1 啟用鍵盤控制 ( 預設 )。
end 停止播放的時間 ( 正整數,從影片最開始 0 秒起算 )。
loop 0 不重複播放 ( 預設 ),1 重複播放。
list 影片清單 id。
cc_load_policy 0 關閉字幕 ( 預設 ),1 開啟字幕。
cc_lang_pref 字幕語系,zh 中文,en 英文,參考 ISO 639-1 standard
color 影片播放進度條顏色,red 紅色 ( 預設 ),white 白色。
fs 0 隱藏全螢幕按鈕,1 顯示全螢幕按鈕 ( 預設 )。

舉例來說,下方的 HTML 嵌入的 YouTube,預設從 5 秒的位置開始,啟用 loop 功能,停用全螢幕功能並隱藏全螢幕按鈕 ( 第一個參數開頭使用 ?,之後每個參數使用 & 分隔 )。

<iframe width="560"
height="315"
src="https://www.youtube.com/embed/WjJZufaOv3o?start=5&loop=1&fs=0"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

HTML 教學

基本介紹

認識 HTML 使用 HTML 編輯器

基礎知識

HTML 標籤與架構 HTML 格式規範 HTML 縮排與註解 HTML 元素顯示類型 HTML 元素屬性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸單位 HTML 網址與路徑 HTML 套用 CSS 樣式 HTML 套用 JavaScript 如何觀察 HTML 原始碼

網頁資訊元素

網頁標題 <title> 網頁資訊 <meta> 載入外部資源 <link> 重設根目錄 <base>

常用元素

標題 <h1>~<h6> 段落 <p> 行內容器 <span> 區塊容器 <div> 超連結 <a> 圖片 <img> 換行 <br> 水平分隔線 <hr> 內嵌頁框 <iframe>

文字樣式元素

粗體字 <strong><b> 斜體字 <em><i> 刪除線文字 <del> 插入 ( 底線 ) 文字 <ins> 小型文字 <small> 上標下標 <sup><sub> 凸顯文字 <mark> 引用 <blockquote><q> 預先格式化 <pre> 程式碼內容 <code> 收折文字內容 <details> 標示注音 <ruby><rt> 標示聯絡方式 <address> 標示鍵盤按鍵 <kbd> 標示時間日期 <time> 標示縮寫 <abbr> 標示可換行位置 <wbr>

表格&清單元素

無序清單 <ul><li> 有序清單 <ol><li> 自訂清單 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表單元素

表單 <form> 輸入 <input> 按鈕 <button> 多行文字輸入 <textarea> 下拉選單 <select> 進度條 <progress> 欄位標題 <label> 欄位資料清單 <datalist> 表單元素分組 <fieldset>

語意結構元素

頁首區塊 <header> 主要區塊 <main> 章節區塊 <section> 文章區塊 <article> 側邊欄區塊 <aside> 引用區塊 <figure> 導航連結區塊 <nav> 頁尾區塊 <footer>

影音&圖形元素

播放影片 <video> 播放聲音 <audio> 響應式圖片 <picture> 點陣畫布 <canvas> 向量圖形 <svg>

網頁嵌入應用

嵌入 YouTube 影片 嵌入 Google 地圖 嵌入 Google 日曆 嵌入 Google 表單 嵌入 Google 簡報 嵌入 Google 文件 嵌入 Google 試算表 嵌入 Google 試算表圖表 嵌入 Twitter 推文 嵌入 Facebook 粉絲團 嵌入 Facebook 影片