Reproductor Kawaii [yOutube]

Weno ya por fin voy a poner este tuto que hace tiempo me pidieron y no habia tenido tiempo de hacerlo, espero y aun tengan ganitas de ponerlo en su blog ^^

para ver como queda da clic en mi nuevo blog de pruebas

oki empezemos con los pasos

como siempre ir a:

Diseno >> Elementos de Pagina >> Anadir gadget html

Copiar este codigo y pegarlo en el gadget:

<div style="position:absolute; top:-310px; left:200px;"><img src="URL DE LA IMAGEN" /></div><div style=" position:absolute; top:-265px; left:244px;"><center>DIRECCION DE TU VIDEO<center></center></center></div>

Como obtener el codigo del video que quiero o me gusta?

1.- Entras a YOUTUBE
2.- Eliges el video de tu preferencia
3.- sigue las instrucciones de la siguiente imagen

el codigo que tome es este:

<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/XeHTLONNbzY?version=3&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/XeHTLONNbzY?version=3&hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

Ahora lo que debes de tomar en cuesta son las medidas del video para que quede justa a la imagen. Como vez las medidas del video original de youtube son width: 420 y height 315 tu las debes cambiar a : WIDTH = 160 HEIGHT = 140

Entonces en RESUMEN el codigo deberia quedar asi:

<div style=" position:absolute; top:-310px; left:200px;"><img src="http://i1085.photobucket.com/albums/j433/Annyz-chan/skinyoutubeannyzblog7.png" /></div><div style=" position:absolute; top:-265px; left:244px;"><center><object width="160" height="140"><param name="movie" value="http://www.youtube.com/v/XeHTLONNbzY?version=3&hl=en_US" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/XeHTLONNbzY?version=3&hl=en_US" type="application/x-shockwave-flash" width="160" height="140" allowscriptaccess="always" allowfullscreen="true"></embed></object><center></center></center></div>

Y para los que quieren hacer la reproduccion automatica ^^ (notaa solo para los que quieren automatica) la reproduccion el codigo quedaria asi:

<div style=" position:absolute; top:-310px; left:200px;"><img src="http://i1085.photobucket.com/albums/j433/Annyz-chan/skinyoutubeannyzblog7.png" /></div><div style=" position:absolute; top:-265px; left:244px;"><center><object width="160" height="140"><param name="movie" value="http://www.youtube.com/v/XeHTLONNbzY?version=3&autoplay=1&hl=en_US" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/XeHTLONNbzY?version=3&autoplay=1&hl=en_US" type="application/x-shockwave-flash" width="160" height="140" allowscriptaccess="always" allowfullscreen="true"></embed></object><center></center></center></div>

Aqui algunas imagenes que hice ^^

http://i1085.photobucket.com/albums/j433/Annyz-chan/skinyoutubeannyzblog.png


http://i1085.photobucket.com/albums/j433/Annyz-chan/skinyoutubeannyzblog2.png


http://i1085.photobucket.com/albums/j433/Annyz-chan/skinyoutubeannyzblog4.png


http://i1085.photobucket.com/albums/j433/Annyz-chan/skinyoutubeannyzblog3.png


http://i1085.photobucket.com/albums/j433/Annyz-chan/skinyoutubeannyzblog6.png


http://i1085.photobucket.com/albums/j433/Annyz-chan/skinyoutubeannyzblog7.png

NOTITA: si no te queda centrado el video ni la imagen solo mueve el " position:absolute;" del top y el left.

espero haya sido clara sino dejame un comentario ^^ besos