•
Youtube iframe 嵌入錯誤: 「無法播放影片 在 YouTube 上觀看」
3 分鐘閱讀 • 
•
這個錯誤的英文訊息為「Video unavailable Watch on YouTube」
Youtube iframe嵌入錯誤: 「無法播放影片 在 YouTube 上觀看」
Youtube iframe 嵌入在「某些影片」無法顯示，出現如圖的灰畫面，這些影片的共通點是「原影片有(音樂)版權宣告」。
而且我在 ng serve 的 localhost 開發是正常的，部署到 Azure Static Web Apps 站台後才有問題。
這是我在做 sound-buttons 專案時遇到的問題，卡了我好幾個月無法解決。
我一直以為這些影片就是被設定無法嵌入，直到我發現同一個影片別人的站台可以嵌入...只有我有問題？！
釐清問題
Youtube iframe 大概(?)會檢查 referer 標頭決定要不要理你，請確認以下幾點
- iframe 向 Youtube 取得文件的 request header 存在
referer標頭 - request 是走 https
refererheader 內容- 是 https 協定
- 和當前 origin 一致
- domain 不是 IP 型式，例如不能是
https://23.123.123.123/ - domain 可以被公開訪問，Youtube 可以找得到你 (除了 localhost 為特例)
- request parameters
解決問題
我的狀況是缺少了 referer header。
一般來說瀏覧器的 Referrer-Policy 預設為 strict-origin-when-cross-origin，會送出 referer header 才對... 但我的網站「被」配置為了 same-origin。
兇手除了 Azure Static Web Apps 站台還能是誰?
那麼解法也很明朗了，在 index.html 加上 meta tag:
<meta name="referrer" content="strict-origin-when-cross-origin" />
為什麼我寫「大概(?)」
因為沒有錯誤訊息沒有文件沒有證據啊
叫我通靈王啦
回覆
你可以使用 Mastodon 或其他 ActivityPub/Fediverse 帳號來公開回覆此文章。現有的公開回覆顯示在下方。