maxr=2;
logger=$('r');
$('buscabtn').addEvent('click',function(){
ivideo=-1;
$$('.controles').setStyle('visibility','visible');
verVideo('sig')
})
function verVideo(x){
ivideo=(x=='sig')?parseInt(ivideo)+1:(parseInt(ivideo)-1);
id=1+parseInt(ivideo)*4;
$$('.ant')[0].setStyle('visibility',(parseInt(ivideo)<1)?'hidden':'visible');
logger.set('html','<center>Buscando...</center>');
new Request.JSONP({
url: 'http://gdata.youtube.com/feeds/api/videos',
data: {
'start-index':id,
'max-results':parseInt(maxr)*2,
q:$('buscatxt').value,
alt:'json-in-script'
},
onComplete: function(r){
var videos=r.feed.entry,id,c=0,html,embed,url,titulo,infovid;
html="<table align='center' style='border-collapse:separate;border-spacing:5'>";
html+="<tr>";
videos.each(function(el,iel){
id=r.feed.entry[iel].link[0].href.split('=')[1].split("&")[0];
url=r.feed.entry[iel].link[0].href.split("&")[0];
titulo=r.feed.entry[iel].title.$t;
infovid='<div class="titulo_vid informacion"><b>titulo</b>: '+titulo+'<br/><b>Url</b>: '+url+'</div>';
embed='<embed src="http://www.youtube.com/v/'+id+'" type="application/x-shockwave-flash" wmode="transparent" allowfullscreen="true" />';
if(c<maxr)
{
html+='<td>'+embed+'<br/>'+infovid+'</td>';
}
else
{
html+='</tr><tr><td>'+embed+'<br/>'+infovid+'</td>';
c=0;
}
c++;
})
html+="</tr>";
html+="</table>"
$('paginaVid').set('html','<center>Página ['+(ivideo+1)+']</center>');
logger.set('html',html);
}
}).send();
}
<div class="foo">
<a class="controles ant" href="javascript:verVideo('ant')">Anterior</a>
<input type="text" name="" value="" id="buscatxt" />
<input type="button" name="" value="Buscar" id="buscabtn" />
<a class="controles" href="javascript:verVideo('sig')">Siguiente</a>
</div>
<div id="paginaVid" ></div>
<div id="r" ></div>
*{font-family:'lucida grande',tahoma,verdana,arial,sans-serif;text-align:center}
.foo{position:relative;display:block;margin:0 auto;text-align:center;width:100%}
.controles,.ant{visibility:hidden}
a,a:link,a:visited,a:active{color:#fff;text-decoration:none,padding:5px 2px;background:#12931C}
a{
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#6AA74F none repeat scroll 0 0;
border:1px solid #208433;
color:#FFFFFF !important;
display:inline;
font-size:11px;
font-weight:normal;
margin:5px auto;
padding:5px 10px;
text-decoration:none;
width:50px;
}
a:hover{text-decoration:underline}
#r{position:relative;width:auto;margin:0 auto}
.titulo_vid{width:150px;font-size:11px;overflow:hidden;padding:10px 0px}
.informacion{
padding:10px;
border:solid 1px #eee;
background:#ffe;
color:#666;
font-weight:normal;
font-size:11px;
width:100%;
}