CSS issue with more than one embed
andreapernici opened this issue · comments
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).
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.
Looks like it's not the case. We fixed this cause it breaks the layout.
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.
See "using the shadow DOM" for more information and I'd check whatever y'all did with your fork.
Without the left: 0 the placholder image is shifted to the right in some cases
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.