javascript - Can't access YouTube video through YouTube JS API inside of Google Chrome Extension, but can inside of JS Fiddle

Question

I am attempt to understand the logic behind whatever trips the 'blocking' mechanism for YouTube's video playback.

Here I am attempt to play back a song which is blocked from embedded playback inside of a JS Fiddle. Observe that it works:

http://jsfiddle.net/E7B9C/17/

Now, I use the exact same code inside of my Google Chrome extension:

http://www.meomixes.com/ if you'd like to click to download extension.

http://www.meomixes.com/Test.crx for direct link to extension.

Observe that I cannot playback the same youtube video:

I was wondering what my debugging options were for this scenario. Does anyone have any ideas on what I should explore? I've tried requesting the following permissions in my manifest, but it did not have any effect:

"permissions": [
"http://*.youtube.com",
"https://*.youtube.com",
"http://*.google.com",
"https://*.google.com"
]

I've placed the full source of Test.crx here: http://www.meomixes.com/Test.zip To load:

• Unzip
• Go to Google Chrome's extension page and enable 'Developer Mode'
• Click 'Load Unpacked Extension' and point to the unzipped directory.
• Observe that the video does not play back.

Last of note: The song plays happily in a Facebook post.

EDIT: I found this: http://gdata.youtube.com/feeds/api/videos/UfESt2KdOdc?v=2&prettyprint=true for the video in question. It pairs with: http://apiblog.youtube.com/2011/12/understanding-playback-restrictions.html.

Just building on the first response. Basically, there is a setting called 'syndication' which prevents from playing on 'external devices' such as TVs and Google Chrome Extensions.

Looking at ways to bypass this issue now.

Answer 1

The Youtube iframe implementation seems to block certain referring urls from displaying licensed content.

The Problem

These referring schemas didn't seem to work with the particular video you're testing with.

 chrome-extension://
 file://

It seems like content licenser, UMG, opted to prevent any plays from extensions or local files. An alternative is to avoid using videos that contain licensed content, but that's boring.

It's inconvenient but there is a workaround that will allow you to implement the iframe player into the extension. All Youtube cares about is that the the player is embedded on a page somewhere on the internet.

Proxy Page

Try replacing the iframe src in popup.htm with the jsfiddle result frame from your example and reload your plugin.

 <iframe width="200" height="200" src="http://fiddle.jshell.net/E7B9C/17/show/"></iframe>

You should see the previously "unavailable" video playing now. Your extension now references a page you control on jshell.net. All Youtube knows is that you're calling their player from jshell.net.

Controls

Now that we have a player, you may notice that you don't have any of the Youtube controls available to you since you're now referencing your own iframe that's referencing the Youtube iframe and it's API. As if it weren't fun enough already, you now get to make your own iframe API to communicate from the chrome-extension to your iframe to Youtube's iframe!

Under normal circumstances a parent can set the child frame's window.location.hash and that frame watches and parses any changes that come through. The child then calls some callback in the parent directly with some new information.

Edit: Instead of using window.location.hash, you could use HTML5's window.postMessage() instead and avoid having to deal with checking and parsing the hash continuously.

That should get you up and running.