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!

Validando el HTML y su sintaxis

Durante el desarrollo de cualquier proyecto web o diseño de sitio web, nos enfocamos por tratar de darle gusto al cliente en todo lo que pide, y generalmente omitimos algunas validaciones básicas, entre ellas la más simple de todas y no menos importante: el HTML.

En realidad, la estructura de una página de HTML, ya sea generada por PHP, ASP, .NET, Ruby o cualquier otro lenguaje, debe tener unos lineamientos básicos, pero hoy por hoy, cuando las plataformas se diversifican, las tecnologías cambian tan rápidamente y la premura por entregar el proyecto, hace que nos encontremos en pleno lanzamiento de nuestro proyecto y surge el comentario de algún amigo a última hora: "Oye, no me carga bien en mi Tablet!", ó "Tengo IE 8 y las imágenes se ven corridas para un lado"... y un sin número de detalles más.

Hay muchas librerías que nos ayudan a minimizar este y muchos otros aspectos, pero siempre pasamos por alto lo más obvio... la estructura y la sintaxis del HTML.

No es de angustiarse, pero si de tener un poco más de cuidado. Lo cierto es que aunque estemos trabajando con HTML5, incluimos sintaxis y tags de HTML1, algunas veces por la costumbre, porque no fuimos precavidos en la arquitectura o porque simplemente funcionó y lo dejamos así.

Por eso les traigo esta herramienta, que no importa la versión del HTML con que estemos trabajando (incluyendo HTML5), siempre nos va a orientar en qué estamos fallando:

El enlace es el siguiente:
http://validator.w3.org/