Número de lecturas: 318
{lang: 'es-419'}

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:

<div class="video-responsive">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/TE0gXOGc9V4" frameborder="0" allowfullscreen></iframe>
</div>

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

Be Sociable, Share!