Videos fluidos sin librerías

¿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.