JMiur [E]

Este es otro método para agregar videos fluidos en una página web, es decir, que sin importar su tamaño, ocupen el ancho total del contenedor y su alto sea siempre proporcional y no haya necesidad de hacer cálculos para cada caso.

En dos entradas anteriores se mostraba cómo hacerlo usando jQuery o JavaScript común y corriente pero, este otro tiene una ventaja sobre aquellos: sólo requiere CSS por lo que el método se simplifica sustancialmente y el resultado es instantáneo.

Según lo que nos explica alistapart.com, la idea es crear un contenedor con una proporción idéntica o casi idéntica al formato del video (4:3, 16:9, etc.) de tal modo que este, se inserte ocupando ese espacio y eso es lo que se logra utilizando las propiedades padding.

Si creo un contenedor donde no indico su ancho y le coloco estas propiedades:
<div style="padding-bottom:20%;height: 0;position: relative;"></div>
veré un rectángulo que ocupará el ancho total de estas entradas (635 pixeles) y tendrá una altura equivalente al 20% de ese ancho (127 pixeles):


Ahora, si coloco cierto contenido dentro de ese DIV posicionándolo de modo absoluto, estableciendo los valores de height y width al 100%, ese contenido se expandirá ocupando todo el contenedor; por ejemplo, una imagen:
<img style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;;" src="URL_IMAGEN" />


Con los videos pasa lo mismo, todo se limita a colocar el código del video a incrustar (sea este una etiqueta IFRAME o una etiqueta OBJECT) dentro de un DIV al que identificaremos con una clase especial que acá, en un rapto de originalidad, llamaré video:
<div class="video">
  <iframe width="420" height="315" src="http://www.youtube.com/embed/xxxxxxxxxxx" frameborder="0" allowfullscreen></iframe>
</div>
Es el código que nos da YouTube con cierto tamaño por defecto y lo usamos tal cual ya que la clave son las reglas de estilo para esa clase:
<style>
  .video {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 30px;
    position: relative;
  }
  .video iframe, .video object, .video embed {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
</style>

Y en este caso, ¿de dónde sale ese valor de 56.25%? Simplemente, es la proporción del video (aspect ratio = 16:9) ya que 9/16 = 0.5625 o sea que la altura es un el 56.25% del ancho; si quisiéramos que la proporción fuera 4:3 el valor sería 75%.

¿Y por qué padding-top: 25px? Porque a la altura del video debemos sumarle la altura de la barra con los controles que en el caso de YouTube es de unos 25 pixeles y que en otros servicios varia aumentando hasta 35 pixeles aproximadamente.


¿Y si no quiero que abarque el 100%? En realidad, siempre abarcará el 100% de "algo", ya que todo contenedor es parte de otro hasta llegar al BODY mismo; en una entrada de Blogger el 100% será el DIV del post en si mismo así que si quisiera que fuera más angosto, debería poner mi DIV de clase video y el IFRAME dentro de otro al que dimensionaré:

<div class="video-contenedor">
  <div class="video">
    <iframe width="420" height="315" src="http://www.youtube.com/embed/xxxxxxxxxxx" frameborder="0" allowfullscreen></iframe>
  </div>
</div>
y agregaré este tipo de regla:
.video-contenedor {
  margin: 0 auto;
  max-width: 100%;
  width: VALORpx;
  /* y le agrego transisiciones porque si */
  -moz-transition: width 1s;
  -webkit-transition: width 1s;
  -o-transition: width 1s;
  -ms-transition: width 1s;
  transition: width 1s;
}
indicando el valor de su ancho.

En este ejemplo, tiene 300 pixeles y haciendo click en los enlaces inferiores, el ancho del contenedor variará y su contenido se re-dimensionará inmediatamente:



200 | 300 | 400 | 500 | 600

8 comentarios:

Daniela González  

Hola JMiur, buen post!, si bien es la primera vez que comento ingreso a tu blog seguido para buscar herramientas igual que al de Gema, han sido mis maestros en estos años.
Lo que más me gusta de tu blog es la forma BIEN ARGENTINA que tienes de explicar las cosas, a lo guacho bien simple y entendible, la hacés cortita y vas al grano por eso estás en mi barra de marcadores.
Gracias por tu trabajo, es una bendición!

JMiur  

Gracias, Daniela :D

Responder
Arturios  

No sabes lo bien que me ha venido para la versión móvil de la web, muchas gracias

JMiur  

Sí. Esa es la utilidad básica del truco. Me alegra que sirviera.

Responder
Solidaridad  

Hola Amigo JAMIUR Años sin venir por Aqui. tengo una consulta y se que tu puedes ayuarme. estoy traspasando mi blog a un CMS y lo estaba haciendo bien por medio del Feed de FeedBurner Hasta que llego a las entrada 25 . llega hasta ahy porque FeedBurner solo actualiza las ultimas entradas del Blog y no guarda ninguna otra. por medio de alguien me indico que por medio de entradas ATOM podia acerlo. el asunto es que ya no tengo esa opcion, la elimine hace mucho tiempo. me puedes ayudar como hacer para colocar entradas atom y si es asi como me indicaron. o tu conoces otra forma. persona que alla escrito aqui. gracias amigo

JMiur  

Lo que ùedes haber quitado es el enlace para suscripción pero el feed es el mismo, Feedburner lo administra pero el feed es un dato interno que no se puee eliminar así que sigue allí y es la direcciçon URL que has indicado en Feedburner:

http://fundacionayudaalrefugiado.blogspot.com/feeds/posts/default

o bien:

http://fundacionayudaalrefugiado.blogspot.com//atom.xml?redirect=false&start-index=1&max-results=500

Responder
Solidaridad  

Gracias mi amigo JMIUR, ahora si esta funcionando el componente con el enlace del feed atom...lo malo que las entradas las pasa sin imagenes, pero algo es algo.

Responder
pau_gamez  

No sabes la cantidad de horas que he tirado a la basura buscando una solución a la altura del dichoso div ni cuanto te lo agradezco!!!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR