VideoSDK Version 1.10.7
Question
Is there a way to send either custom styles or a stylesheet to the shadow DOM that is created inside the <video-player />? The shadow DOM is encapsulated from CSS (MDN reference) and I would like to apply custom styling to the elements that zoom creates in the shadow DOM. For example, I want the video element to cover/fill the entire container element. Currently, the SDK adds inline styling to the video element inside of <video-player /> of { width: 100%; height: 100% } but these inline styles make it impossible to display the video according to the needs of the design.
In summary, how do I apply styles (and remove inline styles) to the elements created within the shadow DOM?
Thank you
Hey @tylertyler
Thanks for your feedback.
May I clarify your requirements?
The video-player element is designed to simplify the previously complex coordinate calculation work. Its functionality is quite simple.
If you require additional styling on top of the video, you can create an additional HTML element, such as a div, to overlay on top of the video-player .
If you need any further assistance, please feel free to contact me.
Thanks
Vic
No, that’s not what I was asking. I don’t want to put additional elements or styles on top of the video as an overlay, I want the video to be contained in it’s container but to fill the container, even if that’s not the same aspect ratio of the video. Here’s a basic example. As you can see the container has a different aspect ratio than the video but the video fills the entire container without changing it’s aspect ratio, this is done with the object-fit property on the video element. This is easily done with CSS, but since the Zoom SDK adds the video element inside of a shadow DOM I need to be able to send styles to that shadow. So my question is is it possible to send a stylesheet to the shadow DOM or custom CSS to the video element that the SDK creates?