Como implementar tela cheia

Aprenda a usar JavaScript para criar uma janela de tela cheia.

Janela de tela cheia

Como usar JavaScript para visualizar elementos em modo de tela cheia.

Clique no botão para abrir o vídeo em modo de tela cheia:

Experimente Você Mesmo

Vídeo de tela cheia

Para abrir um elemento em tela cheia, usamos element.requestFullscreen() Método:

Exemplo

<script>
/* Obtém o elemento a ser exibido em modo de tela cheia (no exemplo, um vídeo): */
var elem = document.getElementById("myvideo");
/* Quando a função openFullscreen() é executada, abre o vídeo em tela cheia. */
Atenção, devemos incluir prefixos para diferentes navegadores, pois eles ainda não suportam o método requestFullscreen */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

Experimente Você Mesmo

Documento de tela cheia

Para abrir toda a página em tela cheia, use document.documentElement em vez de document.getElementById("element").

Neste exemplo, também usamos uma função de fechamento para sair do modo de tela cheia:

Exemplo

<script>
/* Obter documentElement (<html>) para exibir a página em tela cheia */
var elem = document.documentElement;
/* Visualização em Tela Cheia */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* Sair da tela cheia */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

Quando a página estiver em modo de tela cheia, você também pode usar CSS para definir o estilo da página:

Exemplo

/* Safari */
:-webkit-full-screen {
  background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
  background-color: yellow;
}
/* Sintaxe Padrão */
:fullscreen {
  background-color: yellow;
}

Experimente Você Mesmo

Páginas Relacionadas

Manual de Referência do HTML DOM:Método requestFullscreen()

Manual de Referência do HTML DOM:Método exitFullscreen()

Manual de Referência do HTML DOM:Método documentElement