JMiur [E]

¿Es posible automatizar el ancho de los videos para que se vean lo más grande posibles sin tener que usar jQuery como se mostraba en esta entrada?

Sí. Digamos que es relativamente sencillo aunque para usar estas cosas automáticas, hay que entender que debemos ser "prolijos" ya que los códigos no son adivinos así que los datos siempre deben ser agregados de manera más o menos similar. En este caso, la función tomará aquellos videos que se insertan con un IFRAME; por ejemplo:
<iframe width="420" height="345" src="http://www.youtube.com/embed/sln8OkarycE" ... ></iframe>
Uso YouTube porque lo tengo a mano pero da lo mismo cualquier otro servicio. En cualquier caso, lo único que importa es que tengan definidos su tamaño con height y width que es lo normal.

¿Qué hará el script? Simplemente se fijará en cuál es el ancho del contenedor donde está el video (un post, la sidebar, cualquier parte que podamos identificar), leerá el valor de width del video, calculará la proporción (aspect radio), establecerá la nueva altura en función de eso y cambiará los dos datos de la etiqueta, por los valores correspondientes.

Para hacerlo automático, bastaría que la función se ejecutara al cargarse la página pero ¿existe tal cosa como lo automático y universal? La verdad, no.

Cuanto más automatizamos una tarea, más cuidado tenemos que tener para establecer límites precisos ya que los navegadores no son inteligentes, no tienen sentido común ni ninguna otra característica humana; simplemente hacen lo que nosotros les indicamos que hagan.

Es por ese motivo que nunca puedo responder ciertas preguntas salvo con generalidades (este es el caso); porque son preguntas demasiado específicas: quiero que todo se vea de cierto modo EXCEPTO tal cosa. Esas excepciones son la clave de todo y son infinitas; habrá tantas como ideas existan. El diseño web es más que nada una artesanía, se hace a mano, no existe lo universal, todo depende del contexto, de lo que uno quiera, todo depende de esas excepciones. Si no las hay, es fácil; si las hay, habrá que analizarlas una por una. Si lo hacemos bien, el resultado será aceptable y nos aliviará trabajo en el futuro. Son ... los cimientos de una casa; no se ven, no lucen, pero sostienen el resto.

En este caso, como en muchos otros, siempre hay límites que establecer, datos que debemos tener en cuenta. Incluso con el mismo script de jQuery que es una librería sofisticada, por eso sólo funciona con ciertos servicios, si queremos otros, debemos indicarlo. En el caso de Blogger, el mismo servicio utiliza IFRAMEs a destajo así que esas deben ser evitadas y limitarnos a los videos ¿Cómo hacer esto?

Seguramente, mi respuesta no gustará pero, lo ideal es identificar las etiquetas en cuestión con alguna clase CSS; por ejemplo:
<iframe class="videosfluidos ... ></iframe> </div>
Con algo así ya podemos crear la función porque podremos indicar en cuales etiquetas se ejecutará:
<script type='text/javascript'>
//<![CDATA[
  window.onload=function(){
    // crea una lista con todas las etiquetas IFRAME que haya
    var listaIFRAME = document.body.getElementsByTagName("iframe");
    if(listaIFRAME.length>0) {
      var h,w,ar,maxw;
      // lee esa lista una por una
      for(var i=0; i<listaIFRAME.length; ++i) {
        // si tiene la clase que definimos, calcula
        if(listaIFRAME[i].className=="videosfluidos") {
          w = listaIFRAME[i].width; // el ancho
          h = listaIFRAME[i].height; // el alto
          ar = h/w;  // la proporción 
          // se lee el alcho del contenedor, sea cual sea
          maxw = listaIFRAME[i].parentNode.clientWidth;
          // el nuevo ancho es el del contenedor
          listaIFRAME[i].width = maxw;
          // y el nuevo alto es proporcional
          listaIFRAME[i].height = maxw * ar;
        }
      }
    }
  }
//]]>
</script>



En este ejemplo, el script se ejecuta manualmente así que basta hacer click en este enlace para que el video ocupe el ancho del post, sin cambiar su proporción.

8 comentarios:

Graciela  

Genial! creo que existe cierto chip en tu cabecita, al que algunos no accedemos :D

Responder
JMiur  

¿Eso será bueno o será malo? :D

Responder
tomat  

Hola JMiur. Muy bien explicado todo, como acostumbras.
No sé si mi duda tiene mucho que ver con el tema, peo por si acaso lo intento: tengo unos IFRAMEs que saco en mi blog en el que presento unos extractos de una hoja de cálculo hecha en googledocs, poniendo el código que da allí mismo para publicarlos, pero no soy capaz de ajustar el ancho y alto que debo poner en estos iframes para que valga en todos los navegadores, porque unos mismos valores en FF van perfectos pero en IE sobran o faltan. ¿Hay alguna forma de hacer que ajuste bien en todos?

Responder
JMiur  

No tengo presente que haya alguna diferencia sustantiva con las etiquetas IFRAME en los distintos navegadores siempre que se usen valores expresados en pixeles; si se usan valores porcentuales las cosas pueden complicarse.

Podría ser que el espacio disponible en el post difiera porque posee paddings, márgenes o alguna propiedad que haga que sean diferentes?

¿Tienes un ejemplo convreto que pueda verse?

Responder
tomat  

Gracias, JMiur. He verificado lo de que estuvieran en pixeles y la verdad es que no ponía nada, algo del tipo width="250", sin más. Siempre supuse que por defecto eran px. Lo he puesto 250px pero sigue igual. Puedes verlo en www.mustomat.com
Hay varios widgtes que usan este tipo de iframes (Contadores, Clasificación) y aunque se ven completos en FF y en IE, los márgenes vacíos que quedan abajo y a la derecha son distintos.

Responder
JMiur  

El atributo width no requiere unidades, si no las tiene, se asume que son pixeles así que es lo mismo.

Miro tu ejemplo en IE8 y no noto diferencias en el IFRAME pero si en su contenido y eso, es l oque debe estar ocurriendo. Como son tablas, se ven diferentes ya que hay espacios, bordes y celdas vacias que se mustarn distinto en los navegadores y por lo tanto, el tamaño real difiere.

Responder
tomat  

OK. Entiendo que tu respuesta equivale más o menos a que no hay solución o que no está en tu mano.
A ver si los señores de Google encuentran la manera de que sus tablas se puedan ver igual en todos los navegadores, aunque tampoco creo que les interese demasiado.
Y abusando un poco más de tu paciencia: ¿sabes por qué el comando gridlines=false en un iframe (que por algún lado vi que borraba los bordes de las tablas) no funciona más que en FF? ¿hay algún otro mejor?.

Responder
JMiur  

Lo que ocurre es que la tabla se ve distinta en los navegadores, tiene un tamaño diferente y he ahí el problema. Como es un IFRAME, no hay forma de controlar su contenido desde una página externa.

Desconozco los comandos esos pero, he buscado en la web y por lo que dicen, es un problema que no está resuelto y el resultado, varía con los navegadores.

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