Resumen LVL V para taringuero promedio
Es un post re pobre que te da un pedazo de codigo html para crear unos vinculos a los canales online de YouTUBE . Este archivo lo dejas en tu celu o en tu escritorio y lo abrís cuando quieras ver algún programa online.
Si sos el gurú del CSS3 con HTML5 salí inmediatamente porque lo que vas a terminar así:
Intro
Te voy a mostrar como con un block de notas y nada de conocimiento de html te puedes hacer una pagina (muy básica) para ver algunos canales online de YouTUBE .
La idea es que quede algo como lo que te muestro en esta imagen:
1. Miniaturas, thumbnails
Primero vamos a averiguar, dado un video de YouTUBE , como puedes conseguir el preview, thumbnail o miniatura:
Para ello vamos a trabajar con un ejemplo,
supongamos que tienes el siguiente video : https://www. youtube .com/watch?v=829MXdJzhNg
el ID del video es "829MXdJzhNg"
y las miniaturas las encuentras según la definición de imagen que quieras en:
SD : http://img. youtube .com/vi/829MXdJzhNg/default.jpg
HD: http://img. youtube .com/vi/829MXdJzhNg/mqdefault.jpg
FHD: http://img. youtube .com/vi/829MXdJzhNg/hqdefault.jpg
y se verías así:
SD
HD
FHD
yo voy a utilizar las miniaturas en HD, si a esto lo vas a utilizar en un celular puedes usar las miniaturas en SD. Es decir en resumen para cualquier video de YouTUBE puedes obtener el preview o miniatura escribiendo en la barra de direcciones de tu navegador lo siguiente:
http://img. youtube .com/vi/VIDEOID/default.jpg
reemplazando VIDEOID por el ID del video que necesites.
2. Imagen con link, código HTML
Este es el codigo HTML de una imagen que cuando le haces click se abre en una ventana nueva el video .
<a href="URL+&feature=player_embedded" target="_blank"><img src="http://img.
youtube
.com/vi/VIDEOID/mqdefault.jpg" /></a>
por supuesto que donde dice URL debes colocar la URL del video que deseas que se abra al hacer click en la imágen y en VIDEOID el id de ese video , para nuestro ejemplo quedaría algo así:
<a href="https://www.
youtube
.com/watch?v=829MXdJzhNg&feature=player_embedded" target="_blank"><img src="http://img.
youtube
.com/vi/VIDEOID/mqdefault.jpg" /></a>
y queda algo como esto
y si le haces click a la imágen se te abre en una pestaña o ventana nueva el video .
3. Escribiendo el código en el Block de Notas
Ahora vas a abrir un block de notas y vas a hacer copiar y pegar del siguiente texto:
<HTML>
<a href="https://www.
youtube
.com/watch?v=saTxSbSl8cU&feature=player_embedded" target="_blank"><img src="http://img.
youtube
.com/vi/saTxSbSl8cU/mqdefault.jpg" /></a>
<a href="https://www.
youtube
.com/watch?v=mV8jp1N2fSw&feature=player_embedded" target="_blank"><img src="http://img.
youtube
.com/vi/mV8jp1N2fSw/mqdefault.jpg" /></a>
<a href="https://www.
youtube
.com/watch?v=kLlI76mNygk&feature=player_embedded" target="_blank"><img src="http://img.
youtube
.com/vi/kLlI76mNygk/mqdefault.jpg" /></a>
<a href="https://www.
youtube
.com/watch?v=LcSEAC8pkVE&feature=player_embedded" target="_blank"><img src="http://img.
youtube
.com/vi/LcSEAC8pkVE/mqdefault.jpg" /></a>
<a href="https://www.
youtube
.com/watch?v=0tek2aa8hAQ&feature=player_embedded" target="_blank"><img src="http://img.
youtube
.com/vi/0tek2aa8hAQ/mqdefault.jpg" /></a>
<a href="https://www.
youtube
.com/watch?v=5aFYJmXcgXs&feature=player_embedded" target="_blank"><img src="http://img.
youtube
.com/vi/5aFYJmXcgXs/mqdefault.jpg" /></a>
<a href="https://www.
youtube
.com/watch?v=zghho0FINAk&feature=player_embedded" target="_blank"><img src="http://img.
youtube
.com/vi/zghho0FINAk/mqdefault.jpg" /></a>
<a href="https://www.
youtube
.com/watch?v=9pEtMFfSojI&feature=player_embedded" target="_blank"><img src="http://img.
youtube
.com/vi/9pEtMFfSojI/mqdefault.jpg" /></a>
<a href="https://www.
youtube
.com/watch?v=NekjaV4oymY&feature=player_embedded" target="_blank"><img src="http://img.
youtube
.com/vi/NekjaV4oymY/mqdefault.jpg" /></a>
<a href="https://www.
youtube
.com/watch?v=KgdSYOV33XE&feature=player_embedded" target="_blank"><img src="http://img.
youtube
.com/vi/KgdSYOV33XE/mqdefault.jpg" /></a>
<a href="https://www.
youtube
.com/watch?v=ZmRWN2T2n5g&feature=player_embedded" target="_blank"><img src="http://img.
youtube
.com/vi/ZmRWN2T2n5g/mqdefault.jpg" /></a>
<a href="https://www.
youtube
.com/watch?v=9yq1qLBcGBA&feature=player_embedded" target="_blank"><img src="http://img.
youtube
.com/vi/9yq1qLBcGBA/mqdefault.jpg" /></a>
<a href="https://www.
youtube
.com/watch?v=axvAjWecmiQ&feature=player_embedded" target="_blank"><img src="http://img.
youtube
.com/vi/axvAjWecmiQ/mqdefault.jpg" /></a>
<a href="https://www.
youtube
.com/watch?v=Puk-o6dBB3c&feature=player_embedded" target="_blank"><img src="http://img.
youtube
.com/vi/Puk-o6dBB3c/mqdefault.jpg" /></a>
<a href="https://www.
youtube
.com/watch?v=C04_4iqyjxA&feature=player_embedded" target="_blank"><img src="http://img.
youtube
.com/vi/C04_4iqyjxA/mqdefault.jpg" /></a>
<a href="https://www.
youtube
.com/watch?v=FmGfvrGt8NU&feature=player_embedded" target="_blank"><img src="http://img.
youtube
.com/vi/FmGfvrGt8NU/mqdefault.jpg" /></a>
<a href="https://www.
youtube
.com/watch?v=-alfinqeX1w&feature=player_embedded" target="_blank"><img src="http://img.
youtube
.com/vi/-alfinqeX1w/mqdefault.jpg" /></a>
</HTML>
Luego vas por el menu Archivo,
Luego seleccionas Guardar como...
así como en esta imagen
y le das un nombre, con la extensión .html
así como en la imagen
y listo, para probarlo simplemente le haces doble click y lo abres con tu navegador por defecto, el resultado es simple pero efectivo. Puedes poner los canales que tu quieras y sean de tu agrado.
Mirá los canales del ejemplo sin salir del post
si quieres puede acceder desde este mismo post haciendo click en el canal que te interese,
YAPA
el codigo para insertar un link a un video en un post es :
[url=URL+&feature=player_embedded][img]https://ugc.kn3.net/i/origin/http://img.
youtube
.com/vi/VIDEOID/default.jpg[/img][/url]
Recuerda que puedes usar default.jpg, mqdefault.jpg o hqdefault.jpg dependiendo del tamaño de la imagen que quieras como miniatura del video . Esto te es muy útil cuando quieres hacer un posteo con muchos videos de youTube , si lo haces del modo convencional el post tarda en cargar, pero como te propongo hacerlo yo solo carga las imágenes y tu haces click en el video que deseas ver.
