vagacode

Ya que la mayoría de los servicios de videos nos dan una etiqueta iframe para compartirlos, si hacemos uso intensivo de ellos, es fácil crear una función que genere el código de modo estandarizado, basándose en un solo dato. Obviamente, como las necesidades son infinitas, las soluciones también lo son pero, cada uno sabrá adaptar el concepto general.

Tomemos como ejemplo un par de servicios como YouTube y Vimeo. Cuando accedemos a la pagina del servicio, por lo general, vemos que los videos están identificados con una serie de caracteres alfanuméricos:

https://www.youtube.com/watch?v=waoUychgyXs
https://vimeo.com/71196835

Si queremos insertarlos en nuestro sitio, buscamos el código que nos dan que puede variar dependiendo de las opciones disponibles:

<iframe width="560" height="315" src="https://www.youtube.com/embed/waoUychgyXs" frameborder="0" allowfullscreen></iframe>

<iframe src="https://player.vimeo.com/video/71196835?title=0&byline=0&portrait=0" width="640" height="356" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Simplificaremos el asunto, usando etiquetas personales como estas:

<div class="autovideo" serv="youtube" vid="waoUychgyXs"></div>

<div class="autovideo" serv="vimeo" vid="71196835"></div>

Cada div tiene una clase particular y dos atributos extras: serv que indicará el tipo de servicio y vid que será el identificador del video que es el que nos mostraban las páginas de esos servicios.

Un poco de estilo nos permite adaptar esos contenedores a los gustos de cualquiera:

.autovideo {
	border: 2px solid #34b3a0;
	height: 360px;
	margin: 0 auto;
	padding: 2px;
	width: 480px;
}
  .autovideo iframe {
	height: 100%;
	width: 100%;
}

Si pusiéramos eso así como así no veríamos nada más que unos rectángulos ya que en ellos no hay ningún contenido. Así que ahora adosaremos la función que las interpretará. En este caso usaré jQuery porque me parece que es una librería simple de manejar pero podría hacerse con JavaScript clásico.

// se deberá ejecutar cuando la página se haya cargado
$(document).ready(function(){
	$('.autovideo').each(function(i){
		var servicio = $(this).attr('serv'); // el tipo de servicio
		var vid = $(this).attr('vid'); // el identificador del video
		var url;
		// creamos la url del video a insertar con las opciones que deseemos
		if(servicio=="youtube") {
			url = "http://www.youtube.com/embed/" + vid + "?rel=0&controls=0&showinfo=0";  
		} else if(servicio=="vimeo") {
			url = "http://player.vimeo.com/video/" + vid + "?title=0&byline=0&portrait=0";
		}
		// agregamos el iframe al div contenedor
		$(this).html('<iframe src="'+url+'" allowfullscreen></iframe>');
	});
});

Pero podemos ir un poco más allá.

Cualquiera que haya insertado videos sabe que muchos de ellos, desaparecen con el tiempo, ya sea porque son eliminados por el usuario o porque son retirados por motivos de copyright y, en esos casos, nos queda un hermoso rectángulo gris o al intentar ejecutarlo sale alguna advertencia.

En el caso de YouTube, podemos intentar resolver esto parcialmente utilizando su API pero, siempre estaremos a merced de los vaivenes del servicio. De todos modos, la técnica es sencilla de implementar y da buenos resultados en la mayoría de los casos.

Lo primero que debemos hacer es obtener una clave para poder usar el API, algo que es bastante sencillo accediendo a la página de desarrolladores de Google y siguiendo sus instrucciones.

Con ella ya podremos usar el API de YouTube y es con ella que, en lugar de insertar un video específico utilizando su identificador, haremos una búsqueda de determinadas palabras (por ejemplo el titulo de un video) y extraeremos el identificador del primero que encontremos. Por ejemplo:

<div class="queryvideo" query="Jeff Beck Blow by blow"></div>

Agregaremos entonces la función que es similar a lo que hicimos anteriormente:

	$('.queryvideo').each(function(){
		var vid, url, obj;
		var obj = $(this); // el div contenedor
		var query = $(this).attr('query'); // las palabras que buscamos
		query = query.split(' ').join('+'); // cambiamos los espacios por signos más
		// solicitamos los tres resultados de la búsqueda que sean más relevantes
		$.getJSON('https://www.googleapis.com/youtube/v3/search?q='+query+'&key=YOUTUBE_KEY&type=video&fields=items(id(videoId))&part=id&start-index=1&max-results=3&orderby=relevance&callback=?&format=5',function(data){
			if(data.items.length){
				vid = data.items[0].id.videoId; // el identificador del video
				creamos la url del video a insertar con las opciones que deseemos
				url = "https://www.youtube.com/embed/" + vid + "?rel=0&controls=0&showinfo=0";
				// agregamos el iframe al div contenedor
				obj.html('<iframe src="'+url+'" allowfullscreen></iframe>');
			}
		});
	});