YouTube embed gives "restricted from playback on certain sites" error despite API metadata indicating otherwise
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
As Jeff Posnick pointed out, some videos have blacklists. If you try and request a video with a blacklist from an app and not a web page, you will see this error message:
"This video contains content from ___. It is restricted from playback on certain sites."
It's likely your app is NOT blacklisted, and that you're being blacklisted incorrectly. To fix this, you need to supply your Youtube API request with an origin (as atulkhatri pointed out).
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.
This answer works for the V3 API of Youtube.
Actually, if you embed your video here:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
Like this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<iframe width="420" height="315" src="https://www.youtube.com/embed/waxat-_tRH8" frameborder="0" allowfullscreen></iframe>
</body>
</html>
It actually is playable. So the problem actually comes back to why it works on website but not iOS mobile app?
Then I found out about this post:
http://support.metacdn.com/hc/en-us/articles/204513985-Video-Player-Embed-Restriction
It explains that the embed could be restricted due to lack of HTTP header "Referer" field.
So after setting the refer field, this video will be playing in iOS app:
let youtubeURL = NSURL(string: "https://www.youtube.com/embed/YQHsXMglC9A?autoplay=1")
let youtubeRequest = NSMutableURLRequest(URL: youtubeURL!)
youtubeRequest.setValue("https://www.youtube.com", forHTTPHeaderField: "Referer")
webView.loadRequest(youtubeRequest)
Wala, it works now!
Are you happy? cause I am happy. :)