Para poder realizar cambios en el codigo que tomamos de youtube, y poner un video en nuestra web, tenemos que primero comprenderlo. Los cambios que youtube efectua sobre el vido, por ejemplo el tamaño, poner un borde, cambiar de color el reproductor, videos relacionados, entro otros, se pueden ver como partes de codigo agregado.
Miremos un ejemplo,
<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/XXXXXXXXXXX&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/XXXXXXXXXXX&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
Este es el codigo de Embed mas sencillo posible, solo podemos cambiar el ancho y el alto del video, para esto modificaremos los valores 265 y 320 (en pixeles) a nuestras necesidades.
La parte en rojo equivale al ID del video, asi que podemos sustituirlas y mostrará uno nuestro.
Lo siguiente será aplicarlo a un video y añadir una parte mas para evitar "videos relacionados".
<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/aP6nYdH_U3A&hl=en&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/aP6nYdH_U3A&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
el &rel=0 hace que al terminar el video, este no muestre otros videos relacionados.
algo como esto:
Otros codigos, no tan necesarios, sino para decorar el reproductor son:
&color1=0xe1600f&color2=0xfebd01 Para agregar color.
&border=1 Para agregar un borde.
Auto reproducir un video
Para hacer que el video se reproduzca solo, apenas visitemos la pagina, basta con agregar en la direccion (src="DIRECCION") el atributo:
&autoplay=1
Por ejemplo, este codigo tiene todos los atributos "puestos en el".
<object width="340" height="285"><param name="movie" value="http://www.youtube.com/v/p3nSJF7VV_M&hl=en&fs=1&color1=0xe1600f&color2=0xfebd01&border=1">
</param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/p3nSJF7VV_M&hl=en&fs=1&color1=0xe1600f&color2=0xfebd01&border=1&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="340" height="285"></embed></object>
y el resulado seria este:
[+/-]
miniaturas de los videos
algo muy importante cuando enlazamos un video de youtube es la imagen que nos dice de que se trata o por lo menos nos da una idea, la miniatura.
Para no repetir el engorroso proceso de preparar una imagen para cada video, podemos utilizar las miniaturas que provee youtube para cada video. Basta con identificar el ID y sustituirlo en esta direccion:
<img src="http://i1.ytimg.com/vi/XXXXXXXXXXX/default.jpg ">
sustituimos la parte en rojo por el ID y el resultado será este:
Miremos un ejemplo,
<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/XXXXXXXXXXX&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/XXXXXXXXXXX&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
Este es el codigo de Embed mas sencillo posible, solo podemos cambiar el ancho y el alto del video, para esto modificaremos los valores 265 y 320 (en pixeles) a nuestras necesidades.
La parte en rojo equivale al ID del video, asi que podemos sustituirlas y mostrará uno nuestro.
Lo siguiente será aplicarlo a un video y añadir una parte mas para evitar "videos relacionados".
<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/aP6nYdH_U3A&hl=en&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/aP6nYdH_U3A&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
el &rel=0 hace que al terminar el video, este no muestre otros videos relacionados.
algo como esto:
Otros codigos, no tan necesarios, sino para decorar el reproductor son:
&color1=0xe1600f&color2=0xfebd01 Para agregar color.
&border=1 Para agregar un borde.
Auto reproducir un video
Para hacer que el video se reproduzca solo, apenas visitemos la pagina, basta con agregar en la direccion (src="DIRECCION") el atributo:
&autoplay=1
Por ejemplo, este codigo tiene todos los atributos "puestos en el".
<object width="340" height="285"><param name="movie" value="http://www.youtube.com/v/p3nSJF7VV_M&hl=en&fs=1&color1=0xe1600f&color2=0xfebd01&border=1">
</param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/p3nSJF7VV_M&hl=en&fs=1&color1=0xe1600f&color2=0xfebd01&border=1&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="340" height="285"></embed></object>
y el resulado seria este:
[+/-]
miniaturas de los videos
algo muy importante cuando enlazamos un video de youtube es la imagen que nos dice de que se trata o por lo menos nos da una idea, la miniatura.
Para no repetir el engorroso proceso de preparar una imagen para cada video, podemos utilizar las miniaturas que provee youtube para cada video. Basta con identificar el ID y sustituirlo en esta direccion:
<img src="http://i1.ytimg.com/vi/XXXXXXXXXXX/default.jpg ">
sustituimos la parte en rojo por el ID y el resultado será este:
0 comentarios
Publicar un comentario en la entrada al viejo estilo