How to add a fixed watermark on a video in fullscreen mode using an iframe in HTML?

I am working on a project that requires displaying a video in fullscreen mode within an iframe. I want to add a watermark on the video that remains fixed in the center even when fullscreen is activated. The issue is that the default styles applied by the browser when entering fullscreen mode affect the layout of the elements, causing the watermark to change its position.

When I enter fullscreen mode, the properties of .watermark are affected, causing it to change its position or not appear correctly. How can I ensure that the watermark stays fixed in the center even when switching to fullscreen mode?

I am using HTML, CSS, and JavaScript.
I have tried adjusting styles, but it seems that there are default (user agent styles) affecting the layout of the elements.

I implemented a watermark overlay on a video inside an iframe that switches to fullscreen mode. I expected the watermark to remain centered on the video even in fullscreen. However, the watermark’s position shifts unexpectedly due to the browser’s default styles, and it sometimes gets hidden behind other elements or doesn’t scale properly in fullscreen mode.