:fullscreen - Demo without JavaScript

There is a normal misconception that :fullscreen pseudo-class can only be used with JavaScript. This is because that fullscreen mode is usually triggered by JavaScript. However, it is not necessary.

HTML <video> element control interface uses Fullscreen API to trigger itself to be fullscreen. And by that, the :fullscreen pseudo-class can be used to select and style it.

Demo Notes

• The webm video below has a transparent background. The element background color is styled by CSS.
• Normally, the background is blue.
• In fullscreen, the background will begreen.

See MDN for more information about the :fullscreen pseudo-class.