Cómo ajustar el tamaño de los vídeos para dispositivos móviles

[ELDAMOBILE]

Hola amigos, el problema que tengo es el siguiente :

- introduzco las medidas de un video el cual se ve muy bien en modo PC, pero en modo MOVIL se sale de la pantalla de lo grande que es.

Sabéis cómo se puede solucionar esto ? Gracias

 

[Xavier Z]

Con los media queries, te dejo el enlace de mozilla: enlace

Las media queries sirven para definir las propiedades css en diferentes tamaños de pantalla.

Ejemplo:
En las pantallas de pc quiero que el ancho del video sea de 720px
En las pantallas de laptops quiero que el ancho del video sea de 600px
En las pantallas de smartphones quiero que el ancho del video sea de 200px

 

[ELDAMOBILE]

Muchas gracias

 

[david limonche]

Hola amigos, el problema que tengo es el siguiente :

- introduzco las medidas de un video el cual se ve muy bien en modo PC, pero en modo MOVIL se sale de la pantalla de lo grande que es.

Sabéis cómo se puede solucionar esto ? Gracias

Yo suelo usar es widht="100%"

 

[BURGAKIKE]

Yo suelo usar es widht="100%"

Eso sería en el código html del video, pero en css sería diferente.

 

[sychowaves]

Seria interesante tener una pista de que reproductor usas para poder hacer las correcciones necesarias
si especulara que usas JWPlayer en Html tendría algo como esto:

$(window).size(function() {
    var $w = $("#youIdentify").width();
    var $h = $width/1.5;
    jwplayer().size($w,$h);
});
</div>

En el caso de no funcionar, tendría en cuenta, Usar porcentajes en el Width para que se apte al marco y trabajaría en mis CSS para ajustar lo demás.

<div id="youPlayer"></div>
<script>
    jwplayer("youPlayer").setup({
        file: "/uploads/youVideo.mp4",
        image: "/uploads/youPoster.jpg",
        width: "100%",
        aspectratio: "12:5" // Set your image ratio here
    });

Css work

#youPlayer .youclass {
  border-radius: 20px;
  padding: 40px;
 max-width: 800px;
 
}
/* Consulta Media Query para cuando cambie de tamaño el dispositivo */
/* Podrás colocar las necesarias */
@media (max-width: 576px) {
  #youPlayer .youclass {
    padding: 20px;
  }
}

Puede que consigas respuestas mas precisas si agregas mas información, acerca del reproductor que usas, eventualmente parte del Código prueba podria ser.
Éxito saludos!