Contenido
La industria del diseño web está evolucionando a un ritmo vertiginoso. Entonces, a veces, necesitamos ajustar nuestras técnicas de diseño y desarrollo para tener en cuenta las nuevas tecnologías.
El diseño web receptivo (RWD) se ha convertido casi en una necesidad en nuestro proceso de diseño moderno. Si bien está creciendo y madurando rápidamente, todavía está en su infancia.
Toma video. Es de esperar que los códigos de inserción que obtenemos de YouTube o Vimeo respondan, al igual que nuestras imágenes. El siguiente código es lo que proporciona YouTube para incrustar videos en páginas web; es un estándar bastante iframe.
iframe width = "560" height = "315" src = "HYPERLINK" http://www.youtube. com / embed / Gk_fLeK7Uk4 "http://www.youtube.com/embed/Gk_fLeK7Uk4" frameborder = "0" allowfullscreen> / iframe>
Pero, si ponemos este marcado en nuestro HTML, el video mantendrá un ancho fijo de 560 px por 315 px, independientemente del tamaño de la pantalla del navegador o del dispositivo. Si estamos trabajando con una imagen o video HTML5 nativo, una solución simple sería agregar el siguiente CSS:
Iframe {ancho: 100%; altura: auto; }
Consulte los archivos del tutorial para ver un ejemplo de trabajo. Aquí nos dirigimos a la iframe con un ancho de 100% para abarcar nuestro contenedor y una altura de auto. Si prueba esto por sí mismo, notará que el video es de ancho completo, pero la altura no sigue la proporción. Podemos solucionar este problema con una solución CSS pura y simple.
Primero, necesitaremos envolver nuestro código de inserción en un elemento HTML adicional, como se muestra a continuación. Agregue el siguiente contenedor div a su iframe.
div> iframe width = "560" height = "315" src = "HYPERLINK" http://www.youtube.com/embed/Gk_fLeK7Uk4 "http://www.youtube.com/embed/Gk_fLeK7Uk4" frameborder = "0 "allowfullscreen> / iframe> / div>
A continuación, agregamos lo siguiente a nuestro archivo CSS:
.video-container {posición: relativa; fondo acolchado: 56,25%; padding-top: 30px; altura: 0; desbordamiento: oculto; }
La contenedor de video clase que envolvimos alrededor del iframe tiene algo de posicionamiento y relleno aplicado. Posición relativo establecerá el adjunto iframe, que está posicionado absolutamente, en el contenedor padre más relativo. Usamos acolchado superior para ajustar la posición de nuestro video donde lo necesitamos, dependiendo del diseño.
La fondo acolchado El porcentaje se determina a partir de la relación de aspecto 16: 9. Si divide nueve por 16, obtiene 56.25%. Notarás que estamos usando fondo acolchado, altura: 0 y desbordamiento: oculto. Se trata principalmente de correcciones de Internet Explorer, que ayudarán a que nuestra solución funcione en todos los navegadores.
Ahora, nos centraremos en el iframe, objeto y empotrar con lo siguiente:
.video-container iframe, .video-container object, .video-container embed {position: absolute; arriba: 0; izquierda: 0; ancho: 100%; altura: 100%; }
Dado que hemos posicionado el marco absoluto, estableceremos cima y izquierda a 0. Esto colocará el video en la esquina superior izquierda de nuestro contenedor. Puede modificar esta configuración para que coincida con su diseño.
Probemos nuestro ejemplo y veamos los resultados. Consulte los archivos del tutorial para ver un ejemplo de trabajo.
Ahora tenemos un video de YouTube completamente fluido integrado en nuestro diseño receptivo. Esta solución también funcionará con Vimeo (aunque no se ha probado en las plataformas de otros proveedores). Esto es extremadamente efectivo, se implementa fácilmente y también es compatible con todos los navegadores.
Soluciones JavaScript
Si bien nuestra solución no se basa en JavaScript, existen otras opciones que requieren la compatibilidad con JavaScript. FluidVids.js de Todd Motto está escrito en JavaScript vanilla. Para comenzar, descárguelo y agregue JavaScript a su sitio web.
Agregar una reserva
A veces, los usuarios pueden tener JavaScript desactivado, especialmente en algunos dispositivos móviles. Una alternativa simple sería la siguiente:
iframe {ancho máximo: 100%; }
Otra solución de JavaScript popular es FitVids.js, que se describe como "un complemento jQuery liviano y fácil de usar para incrustaciones de video de ancho fluido". FitVids fue creado por el fundador de CSS-Tricks, Chris Coyier y Paravel.
Esto funcionará de la misma manera que FluidVids de Todd Motto, basándose en JavaScript. Por ejemplo:
script src = "ruta / a / jquery.min.js"> / script> script src = "ruta / a / jquery.fitvids.js"> / script> script> $ (documento). listo (función () {/ / Apunte su .container, .wrapper, .post, etc. $ ("# cosa-con-videos"). FitVids ();}); / script>
El sitio web dice: "Esto ajustará cada video en un div.fluid-width-video-wrapper y aplicar el CSS necesario. Después de la llamada inicial de JavaScript, todo es magia CSS basada en porcentajes ". FitVids actualmente es compatible con YouTube, Vimeo, Blip.tv, Viddler y Kickstarter.
Agregar un proveedor de video personalizado
FitVids tiene la opción de agregar un proveedor personalizado. Como se detalla en la documentación, agregue lo siguiente al archivo JavaScript:
$ ("# cosa-con-videos"). fitVids ({customSelector: "iframe [src ^ = 'http: //mycoolvideosite.com'], iframe [src ^ = 'http: //myviiids.com']" });
Conclusión
El diseño web adaptable sigue creciendo y seguirá haciéndolo. Como diseñadores y desarrolladores web, debemos asegurarnos de que nuestro contenido sea accesible en todas las plataformas, sistemas operativos, navegadores y dispositivos. A veces tenemos que hacer un esfuerzo adicional para lograrlo. Las soluciones simples, como las que se describen en este artículo, ya sea en JavaScript o CSS, son muy fáciles de implementar y marcan una gran diferencia para nuestros usuarios. A medida que avanza la tecnología, surgirán nuevas soluciones más fáciles de implementar, o incluso se incorporarán a los productos de los proveedores. Hasta entonces, necesitamos encontrar soluciones. Cada proyecto es diferente, por lo que la solución que elija dependerá de sus objetivos.
Palabras: John Surdakowski
Este artículo apareció originalmente en el número 247 de la revista net.
