Desarrollo web

Responsive Design: adaptar vídeos

En algun momento necesitamos utilizar videos dentro de nuestros aplicativos web en ese caso se vuelve problematico que se muestren bien en la web, el problema es peor cuando te piden que sea responsive (que se adapte a cualquier dispositivo) .

Para esto es util .css y utilizando este codigo se soluciona el problema.

/* Este es el código del ejemplo con un máximo de 600px de ancho */
video{

    width:100%;
    max-width:600px;

}
/* Y así se adaptaría al 100% del ancho de página (para webs móviles sería útil) */
video{

    width:100%;

}

Con esto la pantalla tendra un tamano maximo de 600px y se adapta a cualquier dispositivo.

Si se desea realizar el mismo proceso con videos de youtube o vimeo se tendria que hacer lo siguiente:

Y el codigo .css lo siguiente:

.video-responsive {
    position: relative;
    margin-bottom: 20px;
    padding-top: 56.25%;
}
.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Fuente:
xitrus.es

bufa.es

Similar Posts

Leave a Reply

Your email address will not be published.

%d bloggers like this: