Search code examples
javascriptjquerygoogle-chromefullscreen

Programmatically put Google Chrome into full-screen mode with Javascript?


I was on youtube recently when I clicked the fullscreen button by the youtube video and a message appeared at the top of the screen saying that I was put into full-screen mode. This message was the native message you get when pressing f-11 on your keyboard. I also read something somewhere(that I now cannot find) saying that it's now possible to do this with Javascript.

Question

How would I put the users browser(Google Chrome) into fullscreen, on command? - without an extension they would need to download prior, or anything of that nature.

I'm using jQuery so that would be best, but I can't find how to do it at all.

EDIT: I've seen other questions of this nature, but they were asked a long time ago, and I believe this functionality is fairly new.


Solution

  • Here is good article: Native Fullscreen JavaScript API . It describes all three methods: webkit, firefox and W3-proposal.

    // mozilla proposal
    element.requestFullScreen();
    document.cancelFullScreen(); 
    
    // Webkit (works in Safari and Chrome Canary)
    element.webkitRequestFullScreen(); 
    document.webkitCancelFullScreen(); 
    
    // Firefox (works in nightly)
    element.mozRequestFullScreen();
    document.mozCancelFullScreen(); 
    
    // W3C Proposal
    element.requestFullscreen();
    document.exitFullscreen();