Inici > Programació, Web > Pantalla completa con HTML5

Pantalla completa con HTML5

dissabte, 12 de maig de 2012 Imprimir

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

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

    fullscreen = function(e){
          if (e.webkitRequestFullScreen) {
            e.webkitRequestFullScreen();
          } else if(e.mozRequestFullScreen) {
            e.mozRequestFullScreen();
          }
      }
    document.getElementById('ejemplo-fullscreen').onclick = function(){
        fullscreen(document.getElementById('content'));
    }

Podéis probarlo haciendo click aquí

  1. Alvaro Rubioc
    divendres, 14 de setembre de 2012 a les 00:04 | #1

    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!

  2. Alvaro Rubioc
    divendres, 14 de setembre de 2012 a les 10:03 | #3

    gracias!

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

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

    Gracias!

  3. divendres, 14 de setembre de 2012 a les 12:17 | #4

    Ahora tienes que encontrar la manera de que no te salte al cambiar de página ;p

  4. divendres, 5 d'octubre de 2012 a les 14:10 | #5

    Esta super full el código me servirá mucho. gracias.

Comentaris tancats.