# Video SDK: cannot style videos **URL:** \ **Category:** Web\ **Created:** [December 30, 2021, 7:48am UTC](https://devforum.zoom.us/t/video-sdk-cannot-style-videos/62036 "2021-12-30T07:48:12Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![pavloshchur](https://avatars.discourse-cdn.com/v4/letter/p/f08c70/32.png) [@pavloshchur](https://devforum.zoom.us/u/pavloshchur)\ **Post date:** [December 30, 2021, 7:48am UTC](https://devforum.zoom.us/t/video-sdk-cannot-style-videos/62036/1 "2021-12-30T07:48:12Z")
In the [documentation](https://marketplace.zoom.us/docs/sdk/video/web/essential/video), it is stated that **as a best practice, you should render all participant videos on a single canvas to optimize CPU usage and performance**. As a result, we have one canvas element on the page and cannot apply **CSS** styles to videos. For instance, we’d like to add the participant’s name at the bottom of the video. ![Cannot style videos](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/8/1/8117ced40297b26bdd4f6a139fb036b56bd3965e.png) _The app is run in Chrome 91.0.4472.124 on purpose to get around **cross-origin isolation** issue._ Could you confirm that following the recommendation from documentation makes it impossible to apply **CSS** to videos? ---
**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\ **Post date:** [January 4, 2022, 2:02am UTC](https://devforum.zoom.us/t/video-sdk-cannot-style-videos/62036/2 "2022-01-04T02:02:06Z")
Hey @pavloshchur Thanks for your feedback. As a choice, you can use HTML Element such as DIV Element to cover the canvas, put name, avatar or audio status on the DIV Element. Thanks Vic ---
**Author:** ![pavloshchur](https://avatars.discourse-cdn.com/v4/letter/p/f08c70/32.png) [@pavloshchur](https://devforum.zoom.us/u/pavloshchur)\ **Post date:** [January 4, 2022, 1:57pm UTC](https://devforum.zoom.us/t/video-sdk-cannot-style-videos/62036/3 "2022-01-04T13:57:57Z")
Hi @vic.yang, Thanks for the quick reply. In such a case, we should use a separate canvas for each participant’s camera, correct? ---
**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\ **Post date:** [January 5, 2022, 1:04am UTC](https://devforum.zoom.us/t/video-sdk-cannot-style-videos/62036/4 "2022-01-05T01:04:33Z")
Hey @pavloshchur No. Just add an overlay that covers the canvas, the background of the overlay is transparent and zIndex is higher than the canvas, then add the extra info on the overlay. Thanks Vic ---
**Author:** ![pavloshchur](https://avatars.discourse-cdn.com/v4/letter/p/f08c70/32.png) [@pavloshchur](https://devforum.zoom.us/u/pavloshchur)\ **Post date:** [January 5, 2022, 3:05pm UTC](https://devforum.zoom.us/t/video-sdk-cannot-style-videos/62036/5 "2022-01-05T15:05:07Z")
Hi @vic.yang, Yes, it is a possible solution but not easy to maintain at all. Because in such case we have to calculate coordinates. If we create a separate canvas for each video, will we have some errors or serious performance issues? ---
**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\ **Post date:** [January 6, 2022, 1:26am UTC](https://devforum.zoom.us/t/video-sdk-cannot-style-videos/62036/6 "2022-01-06T01:26:57Z")
Hi @pavloshchur Using separate canvases may result in high CPU and memory usage, and cannot switch videos among the canvases. Although it’s a little complicated to calculate the coordinates, we still recommend using a single canvas to serve the videos. Thanks Vic ---
**Author:** ![nickuk](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/nickuk/32/31345_2.png) [@nickuk](https://devforum.zoom.us/u/nickuk)\ **Post date:** [January 6, 2022, 9:44am UTC](https://devforum.zoom.us/t/video-sdk-cannot-style-videos/62036/7 "2022-01-06T09:44:13Z")
Hi @pavloshchur, You should already have the coordinates, as you’ve had to calculate them to draw the streams to the canvas in the correct position. I would just store those coordinates and the height/widths in an array along with the name of the attendee and reuse them to position the names. Nick ---
**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\ **Post date:** [February 5, 2022, 7:44pm UTC](https://devforum.zoom.us/t/video-sdk-cannot-style-videos/62036/8 "2022-02-05T19:44:26Z")
Closed on February 5, 2022, 7:44pm UTC This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.