search

justinribeiro / lite-youtube

The fastest little YouTube web component on this side of the internet. The shadow dom web component version of Paul's lite-youtube-embed.
https://www.npmjs.com/package/@justinribeiro/lite-youtube
MIT License
966 stars 70 forks source link

CSS issue with more than one embed #43

Closed andreapernici closed 2 years ago

andreapernici commented 2 years ago

In the youtube lite css and html is referenced an "#frame" ID.

This can create issues with more videos on the same page. It could be better to use a CSS class like ".yt-lite-frame"

Then for the placeholder placement it's better to use left: 0 on the ".yt-lite-frame" (ex #frame).

justinribeiro commented 2 years ago

No, because the shadowDom has scoped and isolated styles. Styles and id/classes don't leak into the DOM which one of the nice things about using the shadowDom in this case.

andreapernici commented 2 years ago

Looks like it's not the case. We fixed this cause it breaks the layout.

justinribeiro commented 2 years ago

Looks like it's not the case. We fixed this cause it breaks the layout.

Again, no. The shadowDom does not leak past the boundary within a given shadow tree. The demo file in this project is an example of multiple instances of lite-youtube on the same page with no issue. Similarly, in the screenshot I've applied a style to the frame id that does not affect the shadowDom for the many versions of lite-youtube on that demo page, which is the expected behavior for the web platform as a whole, not just this component.

image

See "using the shadow DOM" for more information and I'd check whatever y'all did with your fork.

andreapernici commented 2 years ago

Without the left: 0 the placholder image is shifted to the right in some cases

image - Copia

This happen using the previous version of the js. Not tested yet the last one, but it doesn't look like you edited the CSS.