Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .example { padding: 10px; height: 200px; width: 95%; background-color: #1c87c9; } .example p { visibility: hidden; text-align: center; color: #eeeeee; font-size: 3em; } .example:-webkit-full-screen { background-color: #8ebf42; width: 100vw; height: 100vh; } .example:-webkit-full-screen p { visibility: visible; } .example:-moz-full-screen { background-color: #8ebf42; width: 100vw; height: 100vh; } .example:-moz-full-screen p { visibility: visible; } .example:-ms-fullscreen { background-color: #8ebf42; width: 100vw; height: 100vh; } .example:-ms-fullscreen p { visibility: visible; } .example:fullscreen { background-color: #8ebf42; width: 100vw; height: 100vh; } .example:fullscreen p { visibility: visible; } </style> </head> <body> <h2>:fullscreen pseudo-class example</h2> <div class="container"> <div class="example" id="example"> <p>Fullscreen mode</p> </div> <br> <button onclick="var el=document.getElementById('example'); el.webkitRequestFullscreen();">Click here</button> </div> </body> </html>