Videos insertados sin insertar videos

...aplicando las anotaciones de JMiur, especificadas en esta entrada. Viendo que Trotamundos (podríamos bautizarla como nuestro enlace a YouTube) empieza a actualizar con muchos vídeos y que eso puede hacer que la página tarde un poco en cargarse, he decidido probar ese truquillo que aparece en el link antes mencionado (ale, aquí de nuevo). Mongas, esta entrada va dirigida a vosotras, para que lo pongáis en práctica y me comentéis que os parece. Según este método, para poner vídeos necesitaremos:

- El vídeo y su consiguiente dirección (no el código embed)
- Redactar el vídeo en HTML (sencillo, ya veréis, solo copiar y pegar)
- Los códigos que ahora os pongo.

Vamos a probar con este vídeo de Vanilla Sky



La forma de insertarlo para que la pagina no sea tan pesada en colocar el siguiente código en la entrada en "edición de HTML"

<div style="display: none;" id="xxxxxxxxxxx">&nbsp;</div>
<div id="xxxxxxxxxxx">
<a href="javascript:crearYouTube('xxxxxxxxxxx')">
<img src="URL_imagen"/>
</a>
</div>

Las "X" las debemos sustituir por el final de la dirección del vídeo.



http://es.youtube.com/watch?v=TvC6VS4Np4U&feature=related

En este caso, eliminamos &feature=related y nos quedamos solo con TvC6VS4Np4U.
En "URL de la imagen" pondremos la dirección de la imagen a la que habrá que hacer click para poder ver el vídeo. Esto es sencillo ya que YouTube tiene tres imágenes distintas por cada vídeo, siendo la que suelen utilizar la numero 2

http://img.youtube.com/vi/xxxxxxxxxxx/2.jpg

En estas "X" también debemos colocar el final del link que he dicho antes (sin &feature=related en caso de que aparezca, cuidado)

Bien, el código base será así:

<div style="display: none;" id="xxxxxxxxxxx">&nbsp;</div>
<div id="xxxxxxxxxxx">
<a href="javascript:crearYouTube('xxxxxxxxxxx')">
<img src="http://img.youtube.com/vi/xxxxxxxxxxx/2.jpg"/>
</a>
</div>

Y en el caso de nuestro vídeo así:

<div style="display: none;" id="TvC6VS4Np4U">&nbsp;</div>
<div id="TvC6VS4Np4U">
<a href="javascript:crearYouTube('TvC6VS4Np4U')">
<img src="http://img.youtube.com/vi/TvC6VS4Np4U/2.jpg"/>
</a>
</div>

Y así es el resultado

Por defecto, la imagen quedará alineada a la izquierda, así que para centrarla solo debemos colocar la etiqueta <center> antes del código que queremos poner y </center> al final.

Ala, me he medio explicado pero espero que intentéis usarlo ^^

Agurcillo piltrafillas

!Ey atento! Si estas interesado en hacer esto mismo en tu blog, pasate por el blog y la ya comentada entrada de los que hablo al principio, ya que esto requiere unos pequeños cambios en la plantilla y un archivillo de nada.