Cómo ser un Freelancer en programación y no morir en el intento.

Vengo escribiendo código desde hace 33 años, tengo empresa y esto le enseño a todos los desarrolladores que he instruido.

Video de YouTube autoadaptable responsive con DIV y CSS

Ahora los sitios WEB deben ser autoadaptables para cualquier tipo de dispositivo. Alegría para los lectores y dolor de cabeza para los programadores y diseñadores... pero bueno, así es como nos ganamos la vida.

En un antojo de un cliente de una tienda virtual en el Centro Comercial Virtual NetU21, nos vimos involucrados con un requerimiento nuevo: que el Slider de fotografías soportara también videos.  Teniendo en cuenta que las tiendas virtuales tienen un formato responsive 100% y que los sliders cumplen con dicho requerimiento, y algunos de los tipos de sliders son generados con texto animado... nuestra primera reacción fue: "Eso no se puede".

Durante una semana más o menos vine jugando con la idea de como hacer el slider responsive y que soportara también videos inmersos de YouTube.  Pues bien, aquí está la solución para hacer que nuestros videos, queden automáticamente responsive en nuestros portales, indiferente del lugar donde los hayamos incluido.

1) Es necesario encerrar el código que nos suministra YouTube con un DIV especial, que será el que controlaremos por hoja de estilos.
2) Hay que especificar en la hoja de estilos que este DIV tendrá un 50% o 60% de padding bottom, y luego los TAG hijos (iframe, object embed) con posición absoluta y 100% a lo ancho y alto. Esto los forzará a expandirse automáticamente.

Así debe quedar en la hoja de estilos:

CSS

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

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

HTML

<div class="video-container">
         <iframe width="640" height="480" src="//www.youtube.com/embed/yT6GA_EKmuc" frameborder="0" allowfullscreen></iframe>
</div>

RESULTADO

Si todo ha funcionado bien hasta ahora, entonces el video se verá muy bien, no importa en que dispositivo se estará mostrando: tablets, moviles, PC, etc.

Y ahora si... pueden hacer el baile de celebración!