Experiência Fullscreen

Nesse artigo, vamos disponilizar para você um código que vai permitir a Experiência Fullscreen em seus vídeos!

O benefício de usá-la é criar uma experiência mais imersiva ao visitante - o que tende a aumentar a conversão.

Quando você usa a Experiência Fullscreen, o vídeo, ao ser iniciado, irá se expandir como se estivesse em tela cheia!

A diferença é que o visitante vai continuar com a opção de rolar a página para baixo e ver outras informações que possam estar ali (como o Botão de Ação)... sem ficar preso no vídeo!

Caso queira que a página role pra baixo, sozinha, para que o Botão de Ação fique em destaque para o visitante, você pode ativar o Scroll até o Botão.

• Se pausar o vídeo, ele volta ao formato original.

Para habilitar esse opção no seu vídeo, você precisa usar a opção de embed no formato JS!

E agora é só colocar o script abaixo no HTML da sua página, abaixo do embed do vídeo:

<script>
document.addEventListener("DOMContentLoaded", () => {
  const player = document.querySelector("vturb-smartplayer");
  if (!player) return;

  player.addEventListener("player:ready", () => {
    player.addEventListener("video:play", () => {
      player.fullscreen("on");
      player.scrollIntoView({ behavior: "smooth", block: "center" });
    });

    player.addEventListener("video:pause", () => {
      player.fullscreen("off");
    });
  });
});

</script>

Prontinho, seu vídeo já estará com a Experiência Fullscreen ativada!

Atualizado em: 14/05/2025