Por si te lo has perdido, en mi anterior entrada del blog explicaba qué es y cómo funciona jquery.oembed

Resumen de las mejoras de esta la versión 1.0.2 de jquery.oembed:

• Añadido atributo “alt” a las imágenes de flickr con el título de la imagen, el autor y el servicio.
• El comportamiento por defecto al insertar código es sustituir el elemento por el código del recurso.
• Puedes elegir tres comportamientos diferentes para insertar código del recurso o indicar la función que se va encargar de procesar el código devuelto.
  • “replace”. Sustituye todo el código del elemento por el del recurso.
  • “fill”. Rellena el elemento con el código del recurso. Es el comportamiento anterior.
  • “append”. Añade un nuevo “div” con el código del recurso después del elemento.

Gracias a ryan.mcgeary y n.d.freear por sus aportaciones.

Ejemplo de jquery.oembed modificando el comportamiento por defecto

<script type="text/javascript">
	$(document).ready(function() { 
		$(".oembed").oembed(null, {embedMethod: "append"}); 
	}); 
</script> 
<h3>Vimeo</h3>
<div><a href="http://vimeo.com/3108686" class="oembed">Vimeo Video</a></div>
<h3>Flickr</h3> 
<div><a href="http://www.flickr.com/photos/14516334@N00/345009210/ class="oembed">Flickr Image</a></div>

En el ejemplo anterior estamos indicando en las opciones del plugin que el método de inserción sea "append". De esta forma a los enlaces que tienen la clase ".oembed" se les añade un "div" con el código del recurso al que enlazan.

Ejemplo de jquery.oembed usando una una función propia para gestionar el código del recurso

También voy a mostrar un ejemplo bastante tonto de cómo utilizar una función propia para procesar el código de un recurso.

<script type="text/javascript">
	$(document).ready(function() {
		$(".oembed").oembed(null, null, function(container, oembed) {
	 		container.hide().after("<table><tr><td>" + oembed.code + "</td><td>" + oembed.code + "</tr></table>");
		});
	 });
</script>
<div><a href="http://www.flickr.com/photos/14516334@N00/345009210/" class="oembed">Flickr Image</a></div>

Como podéis ver, lo que estamos haciendo es esconder el enlace que tiene la información del recurso y crear una tabla repitiendo la imagen. ¡Avisé que el ejemplo era muy simple! De cualquier forma es posible ver el potencial de esta nueva característica.

Puedes descargarte el script de jquery.oembed y usarlo como quieras en tus proyectos.