1
resposta

video responsive

Boa noite fiz um site com video so que ao ver o video no mobile fica um tamanho muito pequeno. Para desktop o tamanho é ideal agora gostaria de aumentar o tamanho da altura para celular http://insanalobotomia.com/site/

<div class="vd-container">


<video width="480" autoplay loop 
  poster="video/sp.gif">
  <source
    src="video/sp.webm"
    type="video/webm">
  <source
    src="video/spmp.mp4"
    type="video/mp4">


</video>


 </div>

.vd-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:0px;
    height:0;
    overflow:hidden;
}

.vd-container video, .vd-container object, .vd-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
1 resposta

Oii Nicolle!

Use uma media query para mudar as dimensões do vídeo para uma resolução de dispositivo móvel.

ex:

@media (max-width: 780px){
}

Dentro desta media query não defina uma largura para o vídeo (deixe width: auto, por exemplo) e defina apenas a altura do vídeo. Pode usar height: 100vh (https://css-tricks.com/viewport-sized-typography/), e transform: translateX(-50%) para alinhar o video ao centro;

veja se isso já resolve!!

abraços!