Espero que este blog ayude a aquellos que están buscando conocimientos, al igual que yo.
Sígueme en:
Blogger Google+ facebook twitter you yube Ver perfil en Linkedin Agregar a Favoritos/Marcadores
pica pica curioso Mi Ping en TotalPing.com Buscar en el blog
Cerrar X Bienvenido amig@!!! Recuerda que puedes recibir las actualizaciones del blog a través de Facebook y/o Twitter, o Suscríbase al Feed vía RSS o vía Email.

Siempre, Siempre, Siempre, antes de modificar tu plantilla guarda una copia.

Descarga la plantilla o copias el código en el bloc de notas.

¿Que es RSS?:

RSS (Really Simple Syndication)

Es un sistema que nos permite enterarnos de las actualizaciones de las paginas que visitamos frecuentemente, sin tener que visitarlas directamente.

¿Cómo funciona?

Así cómo para poder leer correos electrónicos tenemos que tener una cuenta y un lector de correo electrónico, para poder leer nuestras paginas en RSS tenemos que tener un lector de RSS.
Existen muchos lectores de RSS pero uno de los mas sencillos de usar y mas utilizados por todos es el Google Reader, este lector se encarga de agrupar todos los sitios que visitamos frecuentemente mostrándonos la actualización que cada sitio tiene sin necesidad de ir a visitarlos.
Antes yo entraba a los sitios a mirar si habían publicado algo nuevo, ahora mediante los RSS cuando el sitio publica algo nuevo me llega su actualización.

Sencillo, rápido y útil.
votar
Achicar Entrada Agrandar Entrada

Mi nuevo proyecto.

Se puede configurar desde el estilo CSS.

El código se debe colocar en un gadget HTML abajo de la cabecera.

Esta configurado para un ancho de 1000px, y para mostrar 16 vídeos.

Si se quiere se puede quitar o agregar vídeos.

Solo agregar o quitar la siguiente línea.

<a href="http://www.youtube.com/v/boDvXJLau1A" onclick="return cambiarvideo(this.href)" title="Video 2"><img src="http://img.youtube.com/vi/boDvXJLau1A/default.jpg" /></a>

El link del vídeo:

http://www.youtube.com/v/boDvXJLau1A

Cambiar la ID del vídeo (boDvXJLau1A) por la ID del vídeo a mostrar.

La medida del vídeo son de 425 x 344. (Se puede cambiar desde el código Javascript)


La imagen a mostrar:

http://img.youtube.com/vi/boDvXJLau1A/default.jpg

Cambiar la ID (boDvXJLau1A) que es el misma ID del vídeo.

De esta forma generamos una imagen thumbnail.

La medida de las imágenes son de 100px x 70px. (Se puede cambiar desde el estilo CSS)


Pueden elegir cuatro formas de mostrar el vídeo.

Los ejemplos y su respectivo código se encuentra en cada entrada.

Ejemplo del CSS del vídeo mostrado a la derecha:

         ........Imagen thumbnail.........
.contvideogaleria img{width:100px;height:70px;padding:5px;border:1px solid #fff}

         ........El cuerpo contenedor y la imagen a la izquierda.........
.contvideogaleria{width:100%;float:left;background:black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLWPSUfyV89H7_Cv-Mh15BdV0IUkoYGfUnDUHLeeC7qBwIQhrvI6CZOmW-KVCiCat7qSNg-jd9fn7Ewb1DnFIwx4ptk_b7eOZNdSz3idtHtgurlyQBOhWxAGag9cle5IO8maCBLNH-fbw/s1600/youtube.png) no-repeat center left;}

         ........El cuerpo contenedor de las imágenes thumbnail.........
.contvideogaleria .contvideogaleriaimg{margin:20px;margin-left:30px;/margin-left:20px;margin-right:5px}

         ........El cuerpo contenedor del vídeo.........
.contvideogaleria #videogaleria{float:right;margin-right:20px;margin-top:15px;background:red url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Oq5lMU5wJBcGb-XGaOmBTBWVA0VUjQLkweHdYjbO6X391IIAC6djn6xu_rGEZKfdWVzYKSIFDFeIth-dRr4EKBYolI_WDEa4o_USqEWhB-xcuK8hC4Pky_Gmfu_L-16LvKugi6dKfQT1/s1600/video-galeria-vku.png) no-repeat center ;}

Personalizar cambiando medidas, borde, imagen de la izquierda, color del fondo y margenes.

Notarán que hay margenes que tienen delante un /, esto es solo para Internet Explorer.

Los comentarios dejarlos en esta entrada y no en el blog de los ejemplos.

Espero que les sea de utilidad.

Leer Importante... Comentar esta entrada ▼ Ir al principio de la entrada
Resistencia Rojiblanca dijo...

que buen trabajo se ve profesional vere donde puedo ponerlo en mi blog por que estoy corto de espacio,creo que me serviria para una seccion de trailers

Vku dijo...

Yo no lo he probado en poner el código en una entrada. pero si te fijas en los ejemplos cada uno esta en un gadget html y los muestro y oculto con condicionales.

En una página estatica el condicional ponlo así:

<b:widget id='HTML1' locked='false' title='El vídeo se muestra arriba' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;http://video-galeria-vku-web.blogspot.com/2011/02/video-galeria-3.html&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Fijate en la ID del gadget y cambia el link de la página.

Beben Koben dijo...

hohohoho you using javascript for embed youtube brooo...
so clever way, :23)
good good :3)

Vku dijo...

Si, es una forma de mostrar muchos vídeos sin demorar la carga de la página.

If it is a way to show many videos without delay the page load.

Unknown dijo...

Por que el icono de informacion en el mio se va a la parte superior del encabezado.
http://tintaenlahoja.blogspot.com/
o existe algun conflicto con los divs o css?

Vku dijo...

daRIo
Fue error mío ya lo modifique en el código.

Tienes que agregar en el CSS position:relative; en .contvideogaleria

.contvideogaleria{position:relative;width:100%;float:left;background:black url(http://1.bp.blogspot.com/_WvACVGW1iPE/TUd0XZYq5fI/AAAAAAAABtY/QRDdhZwVuUk/s1600/youtube.png) no-repeat center left;}

Unknown dijo...

@ Vku:Gracias, pero ahora con el problema de blogger que no deja hacer nada a la plantilla, a esperar se ha dicho.

Unknown dijo...

hola se puede usar para videos subidos desde mi propio servidor? me refiero a si no estan subidos a ninguna red como youtube??

Vku dijo...

Supongo que si, pero con archivos swf, no se con otros.
Hay que poner los link de los vídeos y de las imágenes y cambiar un poco el código javascript.

value="' + url + '?fs=1&hl=es_ES&rel=0&autoplay=1"
por
value="' + url + '"

y en

src="' + url + '?fs=1&hl=es_ES&rel=0&autoplay=1"

por

src="' + url + '"

Cocina dijo...

Hola Vku!estoy encantada con esto que has creado!
ya lo instale en mi blog me sirve mucho ya que posteo videos a diario,
saludos y muchisimas graciass!
clau

Unknown dijo...

hola quería preguntar algo bueno cuando la publico en mi pagina todo bien pero cuando le doy a reproducir al vídeo lo habré pero de forma gigante ocupa toda la pagina me podría ayudar :5)

Vku dijo...

Me alegro Claudia.

Alexdx2, en tu blog no lo vi, pasame el link en donde lo tengas y me fijo cual es el error.

Juan Matías dijo...

Hola muy bueno el post. pero... Cómo puedo hacer para agregar una imagen como portada(thumbnail) y cuando le de click se reproduzca el video en el mismo espacio. dentro de una entrada de mi blog???

Gracias =)

Vku dijo...

No conozco nada así, tal ves utilizar una ventana modal. Algo como lo que utilice en algunos de mis vídeos.
Ejemplo: http://loseasi.blogspot.com/2010/11/aprendiendo-de-los-ninos.html

Vku dijo...

Lee al principio:


Mi nuevo proyecto.

Se puede configurar desde el estilo CSS.

El código se debe colocar en un gadget HTML abajo de la cabecera.

Esta configurado para un ancho de 1000px, y para mostrar 16 vídeos.

Si se quiere se puede quitar o agregar vídeos.

Solo agregar o quitar la siguiente línea.

Nagato dijo...

tienes razon disculpa mi ignorancia . taba estresado aller q no la pense bien

Nagato dijo...

tengo una pregunta se le puede poner un fondo al reproductor (video reproduciendose)

e visto algunos fondos de youtube tipo marco

Vku dijo...

Eso te conviene preguntar en el foro de youtube, yo no tengo idea. nunca vi eso.
Y menos ahora con el nuevo diseño del reproductor.

jorge duran dijo...

Ola muy bueno ehh me encanto Peooo kisiera saber como puedo modificar Para que cuando io abra mi blog aparesca el video al costado sin darle click ?? me entiendes ... osea que salgan todas las iamgenes pequeñas peo con un video al costado como si ya estubiera abierto .....asii como esta en tu foto al principio de la entrada ... se puede hacer asii ayudame ?
?

Vku dijo...

Jorge:
Después de:

<div class="contvideogaleria">

Pon el código de vídeo.

Tiene que ser el antiguo (object), no el iframe.

Y de 425x344 al igual que los otros.

Queda así:

<div id="videogaleria">
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/pRpeEdMmmQ0?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="http://www.youtube.com/v/pRpeEdMmmQ0?fs=1&amp;hl=es_ES&amp;rel=0&amp;autoplay=1"/></object>
</div>

Vku dijo...

Te puse mal, es después de.

<div id="videogaleria">

Al igual que el ejemplo.

L dijo...

Hola Vku te felicito por tu trabajo
anda perfectamente pero como seria para que al inicio ya salga el
reproductor sin tener q dar click...
gracias de antemano

Si tienes alguna opinión respecto a la entrada, tienes un punto de vista distinto, o simplemente quieres saludar, te invito a que dejes un comentario. NO SE ACEPTAN LINKS DE REFERIDOS para que los comentarios no se conviertan simplemente en una forma de publicitarse.



Elegir un botón o imagen, Seleccionar, copiar (Ctrl+C) y pegar en formulario de comentarios.


Nota: solo los miembros de este blog pueden publicar comentarios.

Si no puedes comentar, intenta con el antiguo formularioO leer solución

VituaRadio
Informe Importante

Por un tiempo voy a estar sin internet, así que no voy a actualizar ni poder contestar a los comentarios.
Suscribirse a las entradas Suscribirse a las entradas vía Mail Suscribirse a los comentarios
¿Que es RSS?