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:
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:
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:
Assim sendo, o código completo ficará mais ou menos assim:
Espero que tenha ajudado! Qualquer dúvida poste nos comentários.