Should this normalize the behavior of going fullscreen?

[wamoyo]

trafficstars

Gecko adds CSS styles to make the element 100% wide and high. Webkit doesn't.

[neovov]

That's a good question.

Here is some thoughts:

• The MDN talks about the difference in presentation between Gecko and Webkit. The workaround is to use an intermediate element (which is kind of sad).
• Gecko seems to behave as told in the specification. (*|*:not(:root):fullscreen { width: 100% !important; height: 100% !important; })
• The :fullscreen pseudo-class is still prefixed (was :full-screen in a previous version, use :-moz-full-screen, :-webkit-full-screen and :-ms-fullscreen ; you will probably have to duplicate your rules for each prefix)
• I think Opera use :-webkit-full-screen, not sure and haven't tested though
• The ::backdrop pseudo-element is still prefixed (::-webkit-backdrop and ::-ms-backdrop)
• Overriding browser's default might be a pain
• Not quite sure if it should be added in the polyfill, maybe in an additional CSS file.

What do you think?

[wamoyo]

I ended up using the :fullscreen pseudo class. And, importantly, I couldn't take the actual video element fullscreen. It needed to be a container that had the custom controls in it as well.

I'm a huge fan of code that I can read, understand, and use in 30 minutes or so. If including something else in the polyfill causes much more added complexity, then for me it's best left out : )

I'm comfortable closing the issue.

Thanks for putting this together, by the way! Incredibly useful, works across every browser I tested.

Here's that CSS:

#fullscreen-video-container:-moz-full-screen
  width 100%
  height 100%

#fullscreen-video-container:-webkit-full-screen
  width 100%
  height 100%

#fullscreen-video-container:-ms-fullscreen
  width 100%
  height 100%

#fullscreen-video-container:fullscreen
  width 100%
  height 100%

[neovov]

Thanks for the feedback 🍻 . I will leave the issue opened so I could think about it.

[wamoyo]

No problem. Reach out if I can be helpful.

One thought: You could try to normalize the behavior with JavaScript, adding the CSS dynamically. Some quick research doesn't yield positive results http://stackoverflow.com/a/311437/1027004

(I guess this space--where browsers, CSS, HTML all start to break down--is where polyfills have a role to play)