Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Including platform.js breaks YouTube's iframe API #468

Closed
peterhorne opened this issue Apr 7, 2014 · 4 comments · Fixed by googlearchive/ShadowDOM#419
Closed

Including platform.js breaks YouTube's iframe API #468

peterhorne opened this issue Apr 7, 2014 · 4 comments · Fixed by googlearchive/ShadowDOM#419
Assignees
@arv
Labels
bug

Comments

@peterhorne
Copy link

I've been playing around with Polymer for a few days now and it's awesome, thanks! Apologies if this is not an issue with Polymer, but rather YouTube's API.

Including platform.js on a page that is making use of YouTube's iframe API causes the following: Uncaught SyntaxError: Failed to execute 'webkitMatchesSelector' on 'Element': 'yt:player' is not a valid selector.

Here is a test case the reproduces the issue (removing the inclusion of platform.js on line 4 fixes the problem):

<!doctype html>
<html>
    <head>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.2.2/platform.js"></script>
    </head>

    <body>
        <div id="ytplayer"></div>
        <script>
            // Load the IFrame Player API code asynchronously.
            var tag = document.createElement('script');
            tag.src = "https://www.youtube.com/player_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            // Replace the 'ytplayer' element with an <iframe> and
            // YouTube player after the API code downloads.
            var player;
            function onYouTubePlayerAPIReady() {
                player = new YT.Player('ytplayer', {
                    height: '390',
                    width: '640',
                    videoId: 'M7lc1UVf-VE'
                });
            }
        </script>
    </body>
</html>
@arv arv self-assigned this Apr 7, 2014
@arv
Copy link
Contributor

arv commented Apr 7, 2014

What browser and version are you using? In Chrome 35 I get that error every time I use an invalid selector, no matter if platform.js is present or not:

document.body.webkitMatchesSelector('x:y');
// SyntaxError: Failed to execute 'webkitMatchesSelector' on 'Element': 'x:y' is not a valid selector.

(same thing happens with matches)

document.body.matches('x:y');
// SyntaxError: Failed to execute 'matches' on 'Element': 'x:y' is not a valid selector.

and

document.createElement('x:y').matches('x:y')
// SyntaxError: Failed to execute 'matches' on 'Element': 'x:y' is not a valid selector.

@peterhorne
Copy link
Author

I'm on Chrome 33. However, I've just tried Chrome 36 and am never getting the error, regardless of whether platform.js is included or not!

@dfreedm
Copy link
Member

dfreedm commented Apr 7, 2014

I think the problem here is that ShadowDOM polyfill uses matches in the querySelector and getElementBy* overrides. document.getElementsByTagName(x:y) works

@arv arv added the bug label Apr 7, 2014
@arv
Copy link
Contributor

arv commented Apr 7, 2014

That sounds likely. I'll provide a patch.

arv added a commit to arv/ShadowDOM that referenced this issue Apr 9, 2014
@arv
Fix getElementsByTagName to handle colon and more
799173b 
Instead of relying on CSS selectors, this now implements the
matching as described by dom.spec.whatwg.org

Fixes Polymer/polymer#468
arv added a commit to arv/ShadowDOM that referenced this issue Apr 9, 2014
@arv
Fix getElementsByTagName to handle colon and more
19076d5 
Instead of relying on CSS selectors, this now implements the
matching as described by dom.spec.whatwg.org

Fixes Polymer/polymer#468
arv added a commit to arv/ShadowDOM that referenced this issue Apr 9, 2014
@arv
Fix getElementsByTagName to handle colon and more
150b627 
Instead of relying on CSS selectors, this now implements the
matching as described by dom.spec.whatwg.org

Fixes Polymer/polymer#468
@arv arv mentioned this issue Apr 9, 2014
Merged
arv added a commit to arv/ShadowDOM that referenced this issue Apr 9, 2014
@arv
Fix getElementsByTagName to handle colon and more
83f2229 
Instead of relying on CSS selectors, this now implements the
matching as described by dom.spec.whatwg.org

Fixes Polymer/polymer#468
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@arv arv

Labels
bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix getElementsByTagName to handle colon and more arv/ShadowDOM
3 participants
@arv @dfreedm @peterhorne