Geek Answers Handbook

CSS3 WebKit fullscreen detector not working

I have really tuff time when CSS3 detects full screen. Right now I have:

:-webkit-full-screen body { color: red; background: red; }

When you hit F11 in my browser, nothing turns red.

For testing, I try to turn everything red, but without success. I am using Chromium 31.0.1650.57 . Am I using :-webkit-full-screen incorrectly?

+4
source share
2 answers

I think this is due to the fact that you press F11 to get full screen mode. You need to run fullscreen using webkitRequestFullscreen and other cross-browser versions of this. Also, I believe CSS is not body related. Try using a wrapper and apply it to this element:

HTML (wrapper for applying :-webkit-full-screen to:

 <div id="wrapper"> <a href="#" id="gofullscreen">fullscreen</a> </div>

CSS

  html, body { width: 100%; height: 100%; } #wrapper { height: 100%; width: 100%; } :-webkit-full-screen #wrapper { color: red; background: red; }

JavaScript to run fullscreen:

 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(); } });

See Fiddle and Full Screen Version (Use the Fiddle link to see the code and full screen version to see how it works, Fiddle does not allow full screen viewing).

But :-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

+5
source

Creating an item in full screen mode

Similarly, in some browsers 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%; }

In some browsers, it may not work.

That it worked irrespective of standard Css

 $("#buttonGo").click(function(){ $("#VideoWrapper").css({height: '100%',width:'100%',background:'red',color:'red'}); gofullscreen()});

This works well on chrome, ff, ms

+1
source

More articles:


All Articles