youtube-iframe-api not able to find video element in shadow-dom (created with polymer)

Question

I tried to create polymer component ('custom-element') to embed youtube video. I correctly setup the new YT.Player by passing the id of my div, say 'player'.

Since polymer creates a shadow DOM, the id '#player' is not visible to the document

youtube iframe api setups the youtube widget-api which creates the iframe, but it looks for my '#player' in the root DOM instead of shadow DOM ($('custom-element').shadow)

https://s.ytimg.com/yts/jsbin/www-widgetapi-vflktVMi7/www-widgetapi.js at

b=document;if(a=q(a)?b.getElementById(a):a)

Could there be a way to fix this by somehow passing a reference of the shadow dom to the youtube iframe-api

Answer 1

you can send DOM element instead of selector. So if are using youtube-api , for example, in element test-element , then you can simply pass this.$.player as a parameter . ( I assume that there is element with player id inside test-element);

Or , if you know it's somewhere inside shadow dom and it's path will never change, then you can call it from root like:

document.body.querySelector("my-app").$$("another-element").$$("#player")

this is only example so you understand what i mean