Youtube en tu Web

GALERIA DE VIDEOS YOUTUBE


<style type='text/css'>
.contvideogaleria img{width:100px;height:70px;padding:5px;border:0px solid #fff}
.contvideogaleria{position:relative;width:100%;float:left;display:block;background:white url(http://1.bp.blogspot.com/_WvACVGW1iPE/TUd0XZYq5fI/AAAAAAAABtY/QRDdhZwVuUk/s1600/youtube.png) no-repeat center left;}
.contvideogaleria .contvideogaleriaimg{margin:20px;/margin-bottom:10px;/margin-top:0;margin-left:30px;/margin-left:20px;margin-right:5px}
.contvideogaleria #videogaleria{width:100%;text-align: center;margin:20px;/margin:0;}
</style>

<div class="contvideogaleria">
<div id="videogaleria"></div>
<div class="contvideogaleriaimg">

<a href="http://www.youtube.com/v/gsahxhMmhnQ" onClick="return cambiarvideo(this.href)" title="Fiesta de mayo Huanuquillo 2010 Lima II"><img src="http://i4.ytimg.com/vi/gsahxhMmhnQ/default.jpg" /></a>

<a href="http://www.youtube.com/v/xoDMrR1-vnc" onClick="return cambiarvideo(this.href)" title="Fiesta de mayo Huanuquillo 2010 Lima"><img src="http://i1.ytimg.com/vi/xoDMrR1-vnc/default.jpg" /></a>

<a href="http://www.youtube.com/v/lqrDURFyA08" onClick="return cambiarvideo(this.href)" title="Carnavales Huanuquillo 2010 HD"><img src="http://i1.ytimg.com/vi/lqrDURFyA08/default.jpg" /></a>

<a href="http://www.youtube.com/v/6QTjp3J62g4" onClick="return cambiarvideo(this.href)" title="Carnavales Huanuquillo 2010 II HD"><img src="http://i3.ytimg.com/vi/6QTjp3J62g4/default.jpg" /></a>

<a href="http://www.youtube.com/v/cCyKItOUkQk" onClick="return cambiarvideo(this.href)" title="FIGHT Chutos de Huanuquillo 2010 HD"><img src="http://i4.ytimg.com/vi/cCyKItOUkQk/default.jpg" /></a>

<a href="http://www.youtube.com/v/VamVE_KViLk" onClick="return cambiarvideo(this.href)" title="FIGHT Chutos de Huanuquillo 2010 II HD"><img src="http://i3.ytimg.com/vi/VamVE_KViLk/default.jpg" /></a>

<a href="http://www.youtube.com/v/4luW_oHpurk" onClick="return cambiarvideo(this.href)" title="FIGHT Chutos de Huanuquillo 2010 III HD"><img src="http://i1.ytimg.com/vi/4luW_oHpurk/default.jpg" /></a>

<a href="http://www.youtube.com/v/GKZSYAIqLI8" onClick="return cambiarvideo(this.href)" title="Escuela Huanuquillo
"><img src="http://i4.ytimg.com/vi/GKZSYAIqLI8/default.jpg" /></a>

<a href="http://www.youtube.com/v/gZ69Lg8zcZc" onClick="return cambiarvideo(this.href)" title="carnavales 2010 II
"><img src="http://i4.ytimg.com/vi/gZ69Lg8zcZc/default.jpg" /></a>

<a href="http://www.youtube.com/v/dYSgpImCV-E" onClick="return cambiarvideo(this.href)" title="Tarma Carnavales 2010
"><img src="http://i1.ytimg.com/vi/dYSgpImCV-E/default.jpg" /></a>

<a href="http://www.youtube.com/v/UpXU6ToLW_Q" onClick="return cambiarvideo(this.href)" title="Documental Huanuquillo-Tarma part 1"><img src="http://i2.ytimg.com/vi/UpXU6ToLW_Q/default.jpg" /></a>

<a href="http://www.youtube.com/v/bHZa6HNaG4Q" onClick="return cambiarvideo(this.href)" title="Documental Huanuquillo-Tarma part 2"><img src="http://i3.ytimg.com/vi/bHZa6HNaG4Q/default.jpg" /></a>

<a href="http://www.youtube.com/v/ljAr4ywulHM" onClick="return cambiarvideo(this.href)" title="Documental Huanuquillo-Tarma part 3"><img src="http://i1.ytimg.com/vi/ljAr4ywulHM/default.jpg" /></a>

<a href="http://www.youtube.com/v/NATt1BqlUiI" onClick="return cambiarvideo(this.href)" title="Pachahuara"><img src="http://i3.ytimg.com/vi/NATt1BqlUiI/default.jpg" /></a>

<a href="http://www.youtube.com/v/yYm7waKucPs" onClick="return cambiarvideo(this.href)" title="Invitación Fiesta Negritos de Huanuquillo 2011"><img src="http://i2.ytimg.com/vi/yYm7waKucPs/default.jpg" /></a>

<a href="http://www.youtube.com/v/GNPqumUFq7E" onClick="return cambiarvideo(this.href)" title="Pachahuara - Huanuquillo 2009 - Tarma"><img src="http://i4.ytimg.com/vi/GNPqumUFq7E/default.jpg" /></a>

</div>

<!-- DE AQUÍ EN ADELANTE, NO TOCAR EL CÓDIGO -->
<a href="#" style="position:absolute; top: 15px; right: 15px;" target="_blank"><img style="width:14px; height:14px;border:0" src="#" /></a>
</div>

<script type="text/javascript">
// http://wowjalex.com
function cambiarvideo( url ){
document.getElementById('videogaleria').innerHTML = '<object width="425" height="344"><param name="movie" value="' + url + '?fs=1&amp;hl=es_ES&amp;rel=0&amp;autoplay=1"/><param value="true" name="allowFullScreen"/><param value="always" name="allowscriptaccess"/><param value="transparent" name="wmode"/><embed width="425" height="344" wmode="transparent" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash" src="' + url + '?fs=1&amp;hl=es_ES&amp;rel=0&amp;autoplay=1"/></object>';
return false;
}

</script>





COMO LO MODIFICO?

Solo deben sustituir los últimos parámetros de los videos ejemplo:

Si este es tu video de YouTube, toma los últimos parámetros que aparecen y

http://www.youtube.com/watch?v= GNPqumUFq7E


Colócalos en lugar de los que están en el código, ejemplo:



<a href="http://www.youtube.com/v/ GNPqumUFq7E " onClick="return cambiarvideo(this.href)" title="Fiesta de mayo Huanuquillo 2010 Lima II"><img src="http://i4.ytimg.com/vi/gsahxhMmhnQ/default.jpg" /></a>

Para sustituir el nombre, solo digita lo queprefieres que salga en la parte del (TITLE), ejemplo:


<a href="http://www.youtube.com/v/ GNPqumUFq7E " onClick="return cambiarvideo(this.href)" title="Fiesta de mayo Huanuquillo 2010 Lima II"><img src="http://i4.ytimg.com/vi/gsahxhMmhnQ/default.jpg" /></a>



Y para las imágenes, has click derecho sobre los videos miniaturas que aparecen en YouTube, esto te mostrara una opción llamada (COPIAR URL DE IMAGEN), este lo colocas en lugar de:


<a href="http://www.youtube.com/v/ GNPqumUFq7E " onClick="return cambiarvideo(this.href)" title="Fiesta de mayo Huanuquillo 2010 Lima II"><img src="http://i4.ytimg.com/vi/gsahxhMmhnQ/default.jpg" /></a>





Espero les guste, Youtube en tu Web suerte amigos!

12 comentarios - Youtube en tu Web

zerafin95
funciona bien y también en dispositivos móviles gracias
alexdx2
muy bien ya lo tengo en mi web pero esta muy bien la intencion
daprijo
gracias
sigueme y te doy +5
JCSTDESIGN
Muy bueno, gracias por el tip.
JCSTDESIGN
Una pregunta, sabes alguna forma de poder capturar una imagen de un vídeo de youtube, así como lo hace facebook cuando uno trata de compartir un vídeo. Saludos.
andrese06
una consulta yo pongo los links de mis videos y me sigue mostrando los tuyos
PSv
tenes que cambiarle el id del video tanto en el primer href..en el titulo y en la imagen..
panchompiras
la pondre a funcionar si va bien regreso y te dejo +10
PSv
Es lo que andaba buscando..te doy los puntos....
diazespina
La verdad, era lo que buscaba! Gracias y +10!