Pantalla completa con HTML5

El modo pantalla completa es un modo bastante molón que quizás ya hayáis visto en algunas páginas (como fb por ejemplo; el botón de pantalla completa de las fotos).

Por ahora sólo es compatible con navegadores basados en Gecko (como Firefox) y Webkit (como Chrome).

Este artículo ha sido actualizado el 14 de mayo de 2016 añadiendo los navegadores que faltaban.

Sabiendo esto, simplemente tendremos que poner algún IF :)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var fullscreen = function(elem) {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
  }
}
document.getElementById('ejemplo-fullscreen').onclick = function(){
  fullscreen(document.getElementById('content'));
}

Podéis probarlo haciendo click aquí