I'm displaying a element on a page using the playsinline attribute to allow iOS devices to play the video without set it to fullscreen. That works well but I noticed that, with that property, the video element contains a "Shadow Content (User Agent)" element with a div with a "media-controls-container" class that makes me think it is something related to video controls bar o similar. That div doesn't bother me in general, but I tried to add a click listener on the container of the video element and I noticed that the event isn't fired if I click on the video element surface, thing that works well on desktop browsers instead.
I already tried to set the css property "poiter-events:none" on the video element, but this doesn't seem to be sufficient since the "media-controls-container" that I mentioned before, blocks the event propagation to the underling container. I found out that setting that very same property on the "media-controls-container" solves my problems, but since it is part of this "Shadow Content (User Agent)" I can't figure out how to set the property using css.
I also tried to inspect the video element with javascript and I noticed that the "video.shadowRoot" property is set to null on the element implying, as far as I know, that the shadow content is closed and not accessible.
So basically I'm not able to change the css properties of that shadow content, and I don't know how to let the video element propagate the click event to the parent container.
Does anyone knows how to accomplish this? Notice also that the video element is positioned with "position:absolute" with respect its container (I don't know if it can be useful to know).
Thanks for the help.