[Dica] Como estender o vídeo das aulas horizontalmente

Como vi em outro tópico um colega de curso mencionar que gostaria de poder estender os vídeos vim aqui compartilhar a minha solução não-oficial (famoso se vira nos 30 :laughing:) que estou utilizando no momento. Espero que possa ajudar vocês também.

Primeiro passo:

Abra no seu navegador o modo "Desenvolvedor", no Chrome o atalho é a tecla "F12".
E abra o conteúdo da 'div' indicada pela seta vermelha na imagem.

:exclamation:dica : ao colocar o mouse em cima, a seção correspondente à aquele elemento da página ficará em azul, use isso pra te ajudar a saber se está fazendo no lugar certo. Isso valerá para os próximos passos também)

Segundo Passo:

A seta verde indica a ‘div’ por onde começamos no passo anterior, vá navegando pelos caminhos indicados pelas setas vermelhas até chegar na seção ‘<main class="lesson...’ indicada pela última seta vermelha.

Do lado direito no menu ‘Styles’ desmarque a opção "display: flex" indicada pela seta e caixa laranja conforme a imagem.

Terceiro Passo:

Selecione o caminho indicado pela seta vermelha, fica logo abaixo do último selecionado no passo anterior. Logo em seguida, desmarque o campo "width: 65%" no menu ‘Style’ indicado pela seta laranja.

Você verá que o player ocupará toda a largura do navegador porém o video em si ainda não ocupa todo o espaço.

Quarto Passo:

1 - Partindo do passo anterior indicado pela seta verde.
2 - Vá até o caminho logo abaixo, indicado pela seta vermelha
3 - Desmarque o campo "max-height: 476px", indicado pela seta laranja
4 - Ajuste o valor do campo "height: 35vw", indicado pela seta roxa, de acordo com que o vídeo cubra toda a largura da página

No meu caso o valor ideal foi o de '53vw' porém pode variar para cada pessoa de acordo com o tamanho da janela que você usa no seu navegador.

OBSERVAÇÕES: Infelizmente é necessário refazer os passos toda vez que você fechar o navegador ou atualizar a página utilizando com o F5 ou o botão de atualizar do seu navegador.

Pesquisei uma maneira de deixar essa alteração permanente mas não consegui achar, se você souber, por favor compartilhe nos comentários!!!

espero que ajude vocês, e qualquer dúvida ou sugestão de como melhorar esse tutorial, deixa um comentário abaixo, beleza?

Bons estudos a todos e muito sucesso para nós nessa jornada. :rocket: :rocket: :rocket:

9 Likes

Como ninguém pensou nisso antes? hahaha
Muito bom, cara! Valeu pela dica!

1 Like

Super legal a sua sugestão!

Não tenho nenhuma complementação que você pediu :sweat_smile:, mas tenho outra sugestão pra quem não quiser refazer esses passos toda vez. O Firefox tem a função de picture-in-picture e eu tenho usado ela pra poder ficar com outras aplicações abertas ao mesmo tempo. Faz tanto tempo que uso o Firefox que nem lembrei que o Chrome não tem isso hahaha. Ai depende se vale a pena trocar de navegador pra isso, mas fica a possibilidade :smile:

3 Likes

Muito boa dica, atualmente uso o Brave, mas realmente depois de saber disso estou tentado a migrar pro Firefox. Muito obrigado pela dica!!! :slightly_smiling_face:

1 Like

De nada, vou atualizando o tópico a medida que for descobrindo maneiras melhores.

Vamo que vamo :muscle: :rocket:

1 Like

Cara você mandou a boa. Dica de ouro kkkkkk

1 Like

Tamo junto mano! Fico feliz que curtiu.

1 Like

Uma dica boa também é usar o Firefox, ele permite você assistir os vídeos em uma janela com a possibilidade de dimensionar, basta clicar nesse botãozinho que eu indiquei. Além do vídeo ficar em uma janela você pode escolher onde vai ficar e qual o tamanho dela.


2 Likes

Acabei instalando o Firefox também, tentei instalar umas extensões no Brave mas não funcionaram no site da Gama… Mais um pra família Firefox :rofl: Valeu pela dica

1 Like