How to transform a fullscreen HTML5 video?

Question

I was able to transform a normal, non-fullscreen video element with this CSS-rule:

transform: rotate(9deg) !important;

However, when I put the video fullscreen, the rule gets magically overwritten by user-agent CSS-rules:

So I guess what I am asking is if I can somehow override even the user-agent rules? By the looks of it the transform property is overdriven as it is strikethrough, but yet the video won't rotate.

Answer 1

did you try specifying a css rule, similar to the one enforced by the browser? So, looking at the pasted code above, maybe something like this:

video:-webkit-full-scren {
    transform: rotate(9deg) !important;
}

I did some similar stuff for range inputs, and I successfully overwrote the default browser styles. Maybe it works here too.

Furthermore, I also did some fullscreen tweaking of similar sorts. I wanted to remove the controls when in fullscreen, since I implemented my own. I just used this and it worked:

video::-webkit-media-controls {
    display: none !important;
}

::-webkit-media-controls {
    display:none !important;
}