ImgVideo JS: L’immagine si trasforma in Video!!!

Quello che vi presento oggi è un piccolo script che ho realizzato qualche tempo fa.

L’ho chiamato ImgVideo JS (che fantasia 😛 )

A cosa serve?

Molto spesso sui pc vecchi avere una pagina piena di video di youtube, seppur sia una semplice anteprima, può rallentare di molto la visualizzazione dell’utente.

Questo script permette di impostare un immagine, al click sull’immagine essa scomparirà per dar posto al video…

Funziona con Jquery 1.3+ e basta inserire nell’header il seguente codice:

$(function(){

	$('a.imgvideojs').click(function(){

		var link = $(this).attr('rel').split("|")[0];
		var width = $(this).attr('rel').split("|")[1];
		var height = $(this).attr('rel').split("|")[2];

		 $(this).append('<object>');
		 $(this).attr({ "width":width, "height":height });
		 $(this).append('<param value="'+link+'" name="movie"/>');
		 $(this).append('<param value="true" name="allowFullScreen"/>');
		 $(this).append('<param value="always" name="allowscriptaccess"/>');
		 $(this).append('<embed width="'+width+'" height="'+height+'" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash" src="'+link+'"/>');
		 $(this).append('</object>');
		 $(this).find("img").remove();

	});

});

Dopodichè potrete usarlo cosi:

<a rel=”LINK-DI-YOUTUBE|LARGHEZZA-PX|ALTEZZA-PX” class=”imgvideojs” href=”javascript:void(0)”><img src=”img.png” alt=”prova” title=”Immagine di Prova” /></a>