sábado, 13 de agosto de 2016

Insertar Videos de YouTube en Pagina Web

Código HTML para insertar Vídeos de YouTube en Pagina Web


Incrustar múltiples vídeos de YouTube sin nada especial, copiamos los códigos y listo pero, eso significará que nuestra página se hará muy lenta.

que utiliza la librería SWFobject y el API del mismo YouTube.

Si ya tenemos esa librería en nuestro sitio, no hace falta agregarla. Si no la tenemos, podemos hacerlo poniendo esto antes de </head> o directamente en una entrada:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

Ahora, donde querramos que se vea nuestra lista de videos, escribiremos lo siguiente:

<div id="contenedorYT">Cargando ...</div><script type="text/javascript">swfobject.embedSWF('http://www.youtube.com/v/ID_VIDEO_1&enablejsapi=1&rel=0&fs=1','contenedorYT','425','344', '8',null,null,{allowScriptAccess: 'always',allowFullScreen: 'true'},{id: 'reproductorYT'});function cargarVideo(id) {var o = document.getElementById( 'reproductorYT' );if( o ) {o.loadVideoById( id );}}</script>

Todo eso en una sola línea si se trata de una entrada de Blogger.

ID_VIDEO_1 es el ID del primer vídeo, el que aparecerá por defecto
425 y 344 son el ancho y alto del vídeo
contenedorYT es el ID del DIV donde se mostrará el vídeo
reproductorYT es el ID del reproductor en si mismo

Debajo, pondremos nuestra lista de vídeos a reproducir, en este caso, usando las mismas miniaturas que nos provee YouTube:

<div class="videominiaturas"><a href="javascript:cargarVideo('ID_VIDEO_1');"><img src="http://img.youtube.com/vi/ID_VIDEO_1/1.jpg" /></a><a href="javascript:cargarVideo('ID_VIDEO_2');"><img src="http://img.youtube.com/vi/ID_VIDEO_2/1.jpg" /></a><a href="javascript:cargarVideo('ID_VIDEO_N');"><img src="http://img.youtube.com/vi/ID_VIDEO_N/1.jpg" /></a></div>

Vale recordar que el ID es una serie de once caracteres alfanuméricos que podemos tomar desde cualquier página del servicio. Por ejemplo, si el vídeo fuera este:

http://www.youtube.com/watch?v=uKkbn-pdCMA

Nuestro enlace sería así:

<a href="javascript:cargarVideo('uKkbn-pdCMA');"><img src="http://img.youtube.com/vi/uKkbn-pdCMA/1.jpg" /></a>

El resultado, será un vídeo incrustado y debajo, una serie de miniaturas donde podremos hacer click para ir ejecutándolos uno a uno y que se irán cargando de manera dinámica.


Ejemplo ya terminado y listo de usar:


Primer archivo crear con su editor de Gedit o Block de Notas y adentro escriban este Código y lo guardan como sin paréntesis. (index.php)

<!DOCTYPE html><html lang="en">  <body><?php include('GaleriaYoubute.php');?><br>  </body></html>

Segundo archivo crear con su editor de Gedit o Block de Notas y adentro escriban este Código y lo guardan como sin paréntesis. (GaleriaYoubute.php)

<!DOCTYPE html><html><head><title></title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script><meta name="generator" content="Bluefish 2.2.4" ><meta name="author" content="Robert" ><meta name="date" content="2015-03-22T21:57:12-0430" ><meta name="copyright" content=""><meta name="keywords" content=""><meta name="description" content=""><meta name="ROBOTS" content="NOINDEX, NOFOLLOW"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"><meta http-equiv="content-style-type" content="text/css"><meta http-equiv="expires" content="0"></head><body><div align="center"><h1>Lista de Videos de Youtube</h1>
<!-- Videos de entrada o para blogger --><div id="contenedorYT">Cargando ...</div>
<script type="text/javascript">swfobject.embedSWF('http://www.youtube.com/v/N3nEZ_MA9jE&enablejsapi=1&rel=0&fs=1','contenedorYT','425','344', '8',null,null,{allowScriptAccess: 'always',allowFullScreen: 'true'},{id: 'reproductorYT'});
function cargarVideo(id) {var o = document.getElementById( 'reproductorYT' );if( o ) {o.loadVideoById( id );}}</script>
<!-- Lista de Videos -->
<div class="videominiaturas"><a href="javascript:cargarVideo('N3nEZ_MA9jE');"><img src="http://img.youtube.com/vi/N3nEZ_MA9jE/1.jpg" /></a><a href="javascript:cargarVideo('bCFqaO5cHKM');"><img src="http://img.youtube.com/vi/bCFqaO5cHKM/1.jpg" /></a><a href="javascript:cargarVideo('MNzudIxJ9jU');"><img src="http://img.youtube.com/vi/MNzudIxJ9jU/1.jpg" /></a><a href="javascript:cargarVideo('BfqUjVOBl84');"><img src="http://img.youtube.com/vi/BfqUjVOBl84/1.jpg" /></a></div>
</script></div>
</body></html>


About the Author

Unknown

Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.



::PUBLICIDAD::

Publicar un comentario

 
Coffee Code y SEO © 2016 - Diseñado por | Plantilla de Templateism Blogger Templates