YouTube Shorts 嵌入程式碼

YouTube Shorts 嵌入程式碼

  <iframe 

    width="100%" 

    height="420"

    src="https://www.youtube.com/embed/影片ID"

    title="YouTube Shorts player"

    frameborder="0"

    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

    allowfullscreen>

  </iframe>

範本說明 (結構化)

1️⃣ 外層容器 <div>

• margin:auto; → 讓播放器在文章中置中顯示。

• max-width:360px; → 限制最大寬度，避免版面過寬。

2️⃣ 影片框 <iframe>

• width="100%" → 自動撐滿容器寬度（不會超過 360px）。

• height="420" → 固定高度，維持直式 9:16 視覺。

• src="https://www.youtube.com/embed/影片ID"
  → 嵌入網址，只要更換「影片ID」即可。

• title → 提供簡單說明，利於 SEO 與輔助工具。

• frameborder="0" → 無邊框，外觀乾淨。

• allow → 開啟必要功能（自動播放、PIP 子母畫面等）。

• allowfullscreen → 允許全螢幕播放。

3️⃣ 如何使用

• 將 影片ID 換成 Shorts 的 ID，例如：

  • 原始網址：https://www.youtube.com/shorts/yWammxUCASA

  • 嵌入網址：https://www.youtube.com/embed/yWammxUCASA

---

✅ 效果

• 電腦版：影片寬度最大 360px，版面整齊。

• 手機版：自動縮放，維持直式播放比例。

• 外觀統一，不會忽大忽小。