Step 1：在 YouTube 開啟「分享」並選擇「嵌入」

先進入要放到文章中的 YouTube 影片頁面，點選播放器下方或分享選單中的「分享」。在分享視窗中選擇「嵌入」，不要只複製一般分享網址。

圖 2：在 YouTube 的分享視窗中選擇「嵌入」，取得可放入網站 HTML 的 iframe。

Step 2：複製 YouTube 產生的 iframe 嵌入碼

進入「嵌入影片」後，YouTube 會顯示一段以 <iframe> 開頭的 HTML。直接按右下角的「複製」即可，不需要自己把 watch URL 改成 embed URL。

圖 3：複製 YouTube 官方產生的 iframe HTML。若要指定開始時間，也可先在此處勾選開始時間再複製。

基本 iframe 會長什麼樣子？

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

其中 VIDEO_ID 會由 YouTube 自動換成實際影片 ID。文章後台若只是提供內容編輯功能，建議直接使用 YouTube 產生的程式碼，而不是讓非技術人員自行拼接 URL。

Step 3：回到 Kendo Editor，開啟原始程式碼編輯

回到網站後台，在「簡介」、「詳細描述」或實際要放影片的 Kendo Editor 欄位中，先把文字內容編輯到大致完成，再點工具列上的 </>。Kendo Editor 會開啟 View HTML 視窗，讓你直接修改目前欄位的 HTML。

如果文章已經有段落，請先找出影片應該插入的位置，例如某個 <p>...</p> 後方，再貼 iframe。不要把 iframe 貼進尚未關閉的段落標籤或其他 HTML 屬性中。

Step 4：貼上 iframe，按「更新」回到編輯器

將剛才複製的 YouTube iframe 貼進原始程式碼視窗，確認程式碼完整包含開始與結束的 <iframe>...</iframe>，再按「更新」。

圖 4：在 Kendo Editor 的原始程式碼編輯視窗貼入 YouTube iframe，確認無誤後按「更新」。

Step 5：儲存文章，並到前台實際驗證

按「更新」只代表把原始碼套回 Editor，通常還沒有完成整筆資料的儲存。接著仍要按後台頁面的儲存／更新／送出按鈕，再到前台文章頁確認影片是否正常顯示與播放。

建議至少檢查三件事：桌機版是否能播放、手機版是否超出內容寬度、重新進入後台編輯時 iframe 是否仍存在。第三項尤其重要，因為有些系統會在送出或讀回資料時再次執行 HTML Sanitization，導致 iframe 被移除。

讓 YouTube 影片支援手機版 RWD

YouTube 產生的 iframe 常包含固定 width="560" 與 height="315"。如果網站文章欄位比 560px 窄，手機上就可能產生水平捲軸。較簡單的作法是讓 iframe 寬度跟著父容器縮放。

<iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="YouTube video player"
    style="width:100%;aspect-ratio:16/9;height:auto;border:0;display:block;"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerpolicy="strict-origin-when-cross-origin"
    allowfullscreen>
</iframe>

如果網站需要支援較舊瀏覽器，或 CMS 會移除 aspect-ratio，則可改由前台共用 CSS 控制影片容器比例。不要只把 width 改成 100% 卻保留固定高度，否則畫面比例可能變形。

需要降低 YouTube 個人化追蹤時

YouTube 官方也提供 Privacy Enhanced Mode，可將嵌入網域由 www.youtube.com 改為 www.youtube-nocookie.com。是否採用仍應配合網站的 Cookie、隱私權與同意管理設計。

如果 Kendo Editor 工具列沒有 </>：啟用 viewHtml

若你的 Kendo Editor 工具列沒有原始碼按鈕，先檢查初始化設定是否加入 viewHtml。Kendo UI for jQuery 的 Editor 可透過 tools 指定要顯示的工具。

<textarea id="editor"></textarea>

<script>
$("#editor").kendoEditor({
    tools: [
        "bold",
        "italic",
        "underline",
        "createLink",
        "insertImage",

        // 顯示 View HTML / 原始程式碼編輯工具
        "viewHtml"
    ]
});
</script>

如果系統原本已有完整 tools 設定，不要為了加入 viewHtml 而覆蓋掉既有工具列；應直接把它加入目前的 tools 陣列。若按鈕有出現但沒有文字，也可能只是 Theme、icon 或語系呈現不同。

適用對象／適用情境

• 使用 Kendo UI for jQuery Editor 的企業後台、CMS、Blog 或公告系統。
• 需要讓內容管理人員偶爾嵌入 YouTube 影片，但不值得另外開發完整影音上稿元件。
• 管理者具備基本 HTML 操作能力，知道原始碼修改錯誤可能影響版面。
• 影片由 YouTube 託管，希望減少網站自行存放與傳輸大型影音檔的負擔。

不適用情境

• 大量非技術編輯者：如果每天有多人頻繁插入影片，直接開放 View HTML 容易誤改文章 HTML，較適合開發「貼 YouTube URL → 自動產生安全 iframe」的自訂工具。
• 內容來自不受信任使用者：不要讓一般會員任意提交 iframe。應在後端做 HTML allowlist，只允許必要標籤、屬性與可信任網域。
• 網站禁止第三方影音：若公司 CSP、資安政策或隱私規範不允許 YouTube，就不應用 iframe 繞過政策。
• 影片必須完全自主管理：若需要 DRM、內網播放、權限控管或完全掌握影音檔生命週期，應評估專用影音平台或自建串流方案。

常見錯誤與排查方式

錯誤一：貼了 YouTube 網址，但前台只顯示超連結

原因通常是貼入一般的 watch 或分享網址，而不是 iframe 嵌入碼。

排查方式：回到 YouTube，依序選擇「分享 → 嵌入 → 複製」，確認貼入 Kendo Editor 的內容是以 <iframe 開頭。

錯誤二：按更新時看得到，儲存後 iframe 卻消失

這通常不是 YouTube 問題，而是後端 HTML Sanitizer、WAF 或自訂欄位驗證把 iframe 當成不允許的 HTML 移除。

排查方式：用瀏覽器 DevTools 檢查送出 Request 時 iframe 是否存在，再檢查資料庫儲存值。如果送出時有、儲存後沒有，就應檢查 server-side sanitizer 的 allowlist，而不是一直修改 Kendo Editor。

錯誤三：影片區塊出現空白或瀏覽器顯示拒絕載入

可能是影片本身不允許外部嵌入、影片有限制，或網站 CSP 不允許 YouTube frame。

排查方式：先用同一段 iframe 建立最小 HTML 測試頁；再開啟瀏覽器 Console，查看是否有 Content Security Policy、X-Frame 或 YouTube 播放限制訊息。若是 CSP，應由網站管理者調整允許的 frame 來源，不要關閉整體 CSP。

錯誤四：手機版影片超出文章寬度

YouTube 預設嵌入碼通常帶固定寬高，內容欄位比影片寬度窄時便會溢出。

排查方式：將 iframe 設為 width:100%，並用 aspect-ratio:16/9 或網站既有 responsive video container 控制比例，再用至少一支實機手機測試。

錯誤五：Kendo Editor 找不到 View HTML / </> 按鈕

可能是 Editor 的 tools 設定沒有包含 viewHtml，或自訂工具列時把它移除了。

排查方式：檢查初始化 JavaScript 的 tools 陣列，確認包含 "viewHtml"。若透過 MVC/Core Wrapper 產生 Editor，則檢查對應 Wrapper 的 Tools 設定。

錯誤六：為了解決 iframe 被擋，把所有 HTML 過濾都關掉

這是最危險的處理方式。Kendo Editor 允許編輯 HTML，不代表應信任所有提交內容；關閉過濾會擴大 XSS 與惡意嵌入風險。

排查方式：使用 allowlist 思維，只允許業務真正需要的標籤與屬性，例如 iframe 的必要屬性，並限制 src 只能指向核准的 YouTube 網域。前端 Editor 不是安全邊界，伺服器端仍需驗證。

FAQ

Q1：Kendo Editor 可以直接貼 YouTube 網址就自動變影片嗎？

本文採用的標準流程不是貼一般網址，而是取得 YouTube 的 iframe HTML，再用 View HTML 插入。若想做到「貼網址自動嵌入」，通常要另外實作自訂 tool、paste handler 或後端轉換邏輯。

Q2：Kendo Editor 的原始程式碼功能名稱是什麼？

Kendo UI for jQuery Editor 的 built-in tool 名稱是 viewHtml。介面上可能顯示 View HTML、原始程式碼，或只顯示 </> 類型的 icon，取決於版本與語系設定。

Q3：為什麼 iframe 在 Editor 內沒有正常播放，但前台可以？

編輯器的內容區與正式前台的執行環境不一定相同。不要只以 Editor 內是否直接播放判斷成功；正確做法是儲存後到實際前台頁面驗證 DOM、Console 與播放器狀態。

Q4：可以直接允許所有 iframe 嗎？

不建議。若只有 YouTube 需求，應把允許範圍限制在必要標籤、必要屬性與 YouTube 官方嵌入網域。尤其當 Editor 不是只給高度信任的管理員使用時，更不應把 HTML 輸入視為可信任資料。

Q5：可以使用 youtube-nocookie.com 嗎？

可以。YouTube 官方提供 Privacy Enhanced Mode，會使用 youtube-nocookie.com 作為嵌入網域。不過網站仍應依自身 Cookie、隱私權告知與 Consent Management 設計進行評估。

Q6：影片可以指定從某個時間開始嗎？

可以。YouTube 的嵌入功能支援指定開始時間；最簡單的方式是在「嵌入影片」視窗先勾選開始時間，再複製由 YouTube 產生的程式碼，避免自行處理 query string 時出錯。

Q7：需要修改 Kendo Editor 原始碼才能支援 YouTube 嗎？

如果系統已開啟 View HTML 且後端允許合規 iframe，通常不需要修改 Kendo 元件本身。只有在你希望限制編輯者只能貼 YouTube URL、集中處理 RWD 與安全驗證時，才值得開發自訂插入影片工具。

結論與可立即執行的下一步

在 Kendo UI for jQuery Editor 插入 YouTube 影片，核心流程只有四個動作：YouTube 分享 → 嵌入 → 複製 iframe → Kendo Editor View HTML 貼上。真正容易出問題的地方反而是在儲存後的 HTML 過濾、前台 CSP，以及手機版寬度。

建議先在測試文章放入一支可公開嵌入的 YouTube 影片，完成「後台貼入 → 儲存 → 重新開啟後台 → 前台播放 → 手機檢查」這五項驗證。確認整條資料流程不會移除 iframe 後，再開放給正式內容編輯者使用。

傑飛特科技

如果企業正在規劃 Kendo UI 後台客製、CMS 編輯器功能、API 串接或既有網站系統整合，傑飛特科技可以協助盤點目前的前後端架構、內容儲存流程與安全限制，再評估適合的客製方式。請與我們聯繫 或加入「數位轉型｜政府補助」！

官方資訊／技術文件

• Kendo UI for jQuery Editor：tools API Reference
• Kendo UI for jQuery Editor：Preventing Cross-Site Scripting
• YouTube Help：Embed videos & playlists

重要提醒：API、SDK、平台介面、元件工具列、YouTube 嵌入規則與瀏覽器安全政策可能隨官方更新調整，本文依撰文時官方文件整理。請以官方文件為準。