iframe - 无法嵌入某些YouTube视频，iframe会显示 “the video contains content from WMG. it is restricted from playback on certain sites”

Question

我正在用ClojureScript和Reagent构建一个即时YouTube客户端，当我尝试播放大多数音乐视频时，它目前位于http://instatube.net/上，它显示错误“该视频包含X的内容。在某些站点上不能播放”，但是相同的视频在我的本地服务器上可以正常播放，在两种情况下，iframe都会发送相同的引荐来源网址和原始 header ，当我将视频嵌入此处https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default时，它也可以正常工作
我不明白问题是什么，这是我的iframe试剂组件

[:iframe {:class "embed-responsive-item"
          :allow-full-screen "allowfullscreen"
          :frame-border 0
          :auto-play 1
          :src (str "https://www.youtube.com/embed/" (if (nil? videoId) 
          "SW-BU6keEUw" videoId) "?autoplay=1&enablejsapi=1")}]]

这是我使用以下命令发送给YouTube搜索API v3的ajax请求
cljs-ajax

(fn [term]
  (ajax/GET
    "https://www.googleapis.com/youtube/v3/search"
    {:params {:q term
              :maxResults 5
              :part "snippet"
              :type "video,playlist"
              :key YOUTUBE_API_KEY}
    :handler handle-youtube-resonse
    :response-format (ajax/json-response-format {:keywords? true})
    :headers {:referer "https://www.youtube.com/"
              :x-spf-referer "https://www.youtube.com/"}))

Answer 1

在此SO post中也遇到了相关的错误。

Certain videos have a domain-level whitelist or blacklist applied to them. This is done at the discretion of the content owner.

If there is a whitelist or a blacklist, and the domain of the embedding site can't be determined (perhaps because of there not being a real referring domain in the case of your native application), then the default behavior is to block playback.

This blog post has a bit more detail as well: http://youtube-eng.blogspot.co.uk/2011/12/understanding-playback-restrictions_28.html

另一个答案也有一点，就是如果您尝试从应用而不是从网页请求列入黑名单的视频，则会收到以下错误消息:

"This video contains content from ___. It is restricted from playback on certain sites."

您被错误地列入了黑名单。检查 this answer in a SO post以解决此问题。

You need to supply your Youtube API request with an origin.

In your request header for the Youtube video, set Referer to the domain in which you intend to be making the call from, (for ex. the domain of your app's corresponding website). If you don't have a domain, you could easily write some other domain, and that might work too.

• For Android (Java), you can see an example here.
• For iOS, look above
• For React Native, you can use the origin prop on the component to your domain (origin is mentioned in the docs but doesn't tell you much about it).
• Here is another example of the same issue in a browser when an extension blocked the Referer header from being sent for good measure.

Note:This answer works for the V3 API of Youtube.