Daniel Hendrycks' Blog

Update: I am no longer proposing this, I support Mozilla's Fullscreen API.


<fullscreen>?
The fullscreen tag allows the browser to enlarge applications and hide the browser’s chrome (and other chrome, too) so users can interact with an application as easily as they would with a desktop application. This would be useful for online games, online video, online office apps, etc.

Syntax

<fullscreen hidewindow>
    <before>
        <button src=”before/button.svg”/>
        <hover src=”before/hover.svg”/>
        <press src=”before/press.svg”>
    </before>
    <after>
        <button src=”after/button.svg”/>
        <hover src=”after/hover.svg”/>
        <press src=”after/press.svg”/>
    </after>
</fullscreen>

Elements
The before and after elements specify what button graphic to show; before graphics are applied when the app or element is not in fullscreen, after graphics are applied when the app or element is in fullscreen. Under the before element, you find the graphics that will be used when the button is dormant, when it is hovered over, and when it is being pressed. The same concept is applied to the graphics contained in the after tag. Developers can leave the button, hover and press elements cased in only brackets (<>); by doing so developers can make the controls completely styled in CSS, if desired.

Attribute
The hidewindow attribute instructs the browser to hide its chrome alone, if this is not specified the browser, when instructed by the button, will make the application hide the desktop chrome along with the browser chrome. With the COLOR=red]hidewindow[/COLOR] attribute you can access and interact with other applications.

Browser Controls and Automatic Fullscreen
At the moment, I am not recommending native controls. Prior to this conclusion, I was thinking the native controls should be like they are today in most browsers: flick your mouse up to the top of the screen and the chrome will descend from the top, then after you can leave fullscreen mode. The reason why I no longer recommend this is because if a user using an app that utilizes hidewindow, they could have the desktop chrome at the top of the monitor (typically seen in GNOME environments), since there would be chrome at the top getting the chrome to slide down as we currently see would be awkward and potentially annoying.
At the moment, I am also not recommending automatic fullscreen; the reasoning is obvious, it could will easily annoy people.

Make a single element fullscreen
To make a single element fullscreen, just add the tag inside of the fullscreen tag.
Example:

<fullscreen hidewindow>
    <before>
        <button src=”before/button.svg”/>
        <hover src=”before/hover.svg”/>
        <press src=”before/press.svg”/>
    </before>
    <after>
        <button src=”after/button.svg”/>
        <hover src=”after/hover.svg”/>
        <press src=”after/press.svg”/>
    </after>
<video src="video.ogv" controls>
 video not supported
</video>
</fullscreen>