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

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í

Comentaris arxivats (5)

Els comentaris estan tancats. Aquests comentaris provenen de l'antic lloc de WordPress i només es poden llegir.

Alvaro Rubioc14 Set., 2012 01:04
Hola!

Esto es justo lo que necesito, muchas gracias por tu aporte.
Aunque tendrás que disculpar mi ignorancia, pero no se muy bien donde poner el código dentro de mi wordpress y como hacer el botón que muestre la pantalla completa.

Gracias!
Booletaire14 Set., 2012 01:10
Buscando en google he encontrado esto que creo que te irá muy bien: http://www.longtailvideo.com/blog/26517/using-the-browsers-new-html5-fullscreen-capabilities
Alvaro Rubioc14 Set., 2012 11:03
gracias!

finalmente usé:
http://robnyman.github.com/fullscreen/

y el resultado es este: http://www.splitboardmag.com/01-demo/01-editorial/

Gracias!
Booletaire14 Set., 2012 13:17
Ahora tienes que encontrar la manera de que no te salte al cambiar de página ;p
Kalvin Manson5 Oct., 2012 15:10
Esta super full el código me servirá mucho. gracias.

Edita la pàgina