tigtools

YouTube 嵌入程式碼產生器

貼上 YouTube 連結、選擇播放器選項,並將 iframe 程式碼複製到你的網站。響應式模式會以 16:9 填滿所在容器的寬度。

在瀏覽器中執行 免註冊

影片

播放

語言代碼,例如 en、de 或 pt-BR。設定播放器介面語言;開啟字幕時,也會設定偏好的字幕語言。

尺寸與頁面

尺寸

播放器會填滿容器寬度,並以目前瀏覽器支援的 CSS aspect-ratio 屬性維持 16:9 比例。

為螢幕閱讀器描述播放器。可以的話請使用影片標題。

嵌入程式碼

貼上影片連結以取得嵌入程式碼。

使用方式

  1. 貼上 YouTube 影片連結或其 11 字元 ID。
  2. 設定開始與停止時間,以及你想要的播放選項。
  3. 選擇響應式或固定尺寸,並設定具描述性的標題。
  4. 複製 HTML 並貼到你的頁面或網站建立工具的 HTML 區塊。使用「顯示預覽」來測試。

運作方式

程式碼使用 YouTube 的標準 iframe 播放器。選項會成為播放器位址上的 URL 參數:start 和 end(秒)、autoplay、mute、使用 playlist 的 loop、controls=0、cc_load_policy=1 用於字幕、cc_lang_pref 用於字幕語言,以及 hl 用於播放器語言。隱私增強模式會將位址切換為 youtube-nocookie.com。

部分選項受到 YouTube 或瀏覽器的限制。Autoplay 僅在影片靜音時有效,因此工具會在 autoplay 中加入 mute=1。循環播放單一影片需要將 playlist 參數設為相同的影片 ID,工具會自動加入。字幕只有在影片有提供字幕時才會顯示。擁有者停用嵌入的影片會在播放器中顯示錯誤。

響應式模式會將 iframe 包在一個 aspect-ratio: 16 / 9 且 width: 100% 的方塊中,因此它會隨頁面縮放,而無需使用較舊的 padding-bottom 技巧。固定模式則會寫入 width 和 height 屬性。延遲載入會延遲播放器,直到它接近頁面的可見區域。

範例

注重隱私的響應式嵌入

預設設定:youtube-nocookie.com、響應式 16:9 和延遲載入。將程式碼片段貼到任何 HTML 頁面。

背景式循環播放

自動播放、循環播放且不顯示控制項會產生 …/embed/ID?autoplay=1&mute=1&loop=1&playlist=ID&controls=0。

只播放單一片段

從 1:00 開始並在 2:30 停止,會得到 start=60&end=150;播放器只會播放該片段。

常見問題

為什麼我的嵌入影片無法在有聲音時自動播放?

瀏覽器會封鎖有聲音的自動播放。自動播放需加上 mute=1,工具會自動加入;某些瀏覽器或設定仍可能封鎖。

隱私權保護模式有什麼作用?

它會從 youtube-nocookie.com 載入播放器。根據 YouTube 的說明,除非訪客播放影片,否則不會為了個人化而儲存訪客資訊。

為什麼循環播放需要 playlist=?

YouTube 的 loop 參數只有在有播放清單時才會生效。將 playlist 設為相同的影片 ID,即可讓單一影片重複播放。

產生的程式碼可以在 WordPress 中使用嗎?

可以。將程式碼貼到「自訂 HTML」區塊中。有些網站建立工具會基於安全原因移除 iframe;此時請改用它們內建的影片區塊。

隱私權

嵌入程式碼會在您的瀏覽器中產生,不會將任何資料傳送到任何地方。只有當您點擊「顯示預覽」時,瀏覽器才會從 YouTube(或 youtube-nocookie.com)載入播放器。