Vídeo com auto-height tela inteira

Um cliente me pediu um link que tivesse apenas o um vídeo, mas tinha que ser uma página, e me enviou um vídeo vertical de 1080×1920.

Na exibição do celular isso não é um problema pois ao dar play no vídeo ele assume a tela inteira automaticamente, mas no browser você precisa ter o máximo de alcance de tela para que a exibição não fique muito pequena.

Antes de tudo se existisse o código “height=100%”, tudo seria mais simples. Contudo não existe a altura à 100%, então tive que criar um pequeno script para resolver o problema. Primeiramente eu identifico a altura da janela do visitante:

var windowHeight = window.innerHeight;

Em suma esse código não pega a altura do monitor, e sim a altura da janela do browser.

Altura: 1920 = windowHeightUma vez que eu descubro a altura da janela, é fácil usar a regra de três com a altura da janela para descobrir qual deve ser a largura do vídeo.

Largura: 1080 = X
X = windowHeight * 1080 / 1920

Que em código fica:

var largura = (windowHeight*1080 / 1920)–10;

Dessa forma, minha variável largura tem o tamanho ideal para que a altura do vídeo pegue a tela inteira. Tendo essa altura definida, você seta ela para o vídeo:

document.getElementById(“video1”).style.width = wid + “px”;

Assim sendo, o código completo ficará mais ou menos assim:

HTML:
< video id=”video1″ style=”width:50px;” controls preload=”auto” poster=”(nome do arquivo de imagem).jpg” onclick=”play()” >
<source src=”(caminho do vídeo).mp4” type=”video/mp4″>
</video>

JS:
var windowHeight = window.innerHeight;
var largura = (windowHeight*1080 / 1920)–10;
document.getElementById(“video1”).style.width = largura+“px”;

Espero que tenha ajudado! Qualquer dúvida poste nos comentários.