CSS3 Webkit Full Screen Detection Not Working - html

Question

I am having a really tuff time getting CSS3 to detect full screen. Right now, I have:
:-webkit-full-screen body {
color: red;
background: red;
}
When hitting F11 in my browser, nothing turns red.
For testing, I am trying to turn everything red but not having success. I am using Chromium 31.0.1650.57. Am I using :-webkit-full-screen incorrectly?

Answer 1

I think this has something to do with you pressing F11 to get fullscreen. You need to trigger the fullscreen via webkitRequestFullscreen and the other cross-browser versions of this. Also, I think that the CSS doesn't apply to the body.
Try to use a wrapper and apply it to that element:
document.getElementById('gofullscreen').addEventListener('click', function() {
var elem = document.getElementsByTagName("body")[0];
elem.webkitRequestFullscreen();
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
});
html,
body {
width: 100%;
height: 100%;
}
#wrapper {
height: 100%;
width: 100%;
}
:-webkit-full-screen #wrapper {
color: red;
background: red;
}
<div id="wrapper">
fullscreen
</div>
See Fiddle and Fullscreen version
(Use the Fiddle link to see the code and the Fullscreen version to see it working, Fiddle doesn't allow fullscreen I think).
But the :-webkit-full-screen and the like are experimental, so don't rely on it.
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

Answer 2

Making an element go full-screen
Like this on some browser it may work:
function gofullscreen() {
var elem = document.getElementById("VideoWrapper");
elem.webkitRequestFullscreen();
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
}
$("#buttonGo").click(function(){gofullscreen()});
**//CSS**
:-webkit-full-screen #VideoWrapper {
color: red;
background: red;
width: 100%;
height: 100%;
}
:-moz-full-screen #VideoWrapper {
color: red;
background: red;
width: 100%;
height: 100%;
}
:-ms-fullscreen #VideoWrapper {
color: red;
background: red;
width: 100%;
height: 100%;
}
:full-screen #VideoWrapper {
color: red;
background: red;
width: 100%;
height: 100%;
}
:fullscreen #VideoWrapper {
color: red;
background: red;
width: 100%;
height: 100%;
}
On some browser it might not work
To make it work across regardless of standard Css
$("#buttonGo").click(function(){
$("#VideoWrapper").css({height: '100%',width:'100%',background:'red',color:'red'});
gofullscreen()});
This work well on chrome , ff , ms