Youtube - Broadcast yourself (wallpapers para los fans)

Mostrar los datos y la descripción de los vídeos de YouTube

Con este código se puede mostrar en una entrada los datos de un vídeo que ha sido subido en YouTube.

El título, quien lo subió, la fecha de publicado, la duración, la cantidad de reproducciones, las estadísticas y la descripción.

Tiene un enlace para ir a verlo en la página de YouTube, y una imagen en miniatura del vídeo.

La imagen se genera automaticamente. (mas abajo explico como mostrar la imagen mas grande)

¿Cómo se hace...?

Ir a Diseño, Edición de HTML y justo arriba de </head>

Poner el siguiente código JavaScript:

        <!-- Descripción vídeo YouTube -->
<script type='text/javascript'>
//<![CDATA[
  function youtubeFeedCallback( data ){
    document.write( '<img src="' + data.entry[ "media$group" ][ "media$thumbnail" ][ 0 ].url + '" width="' + data.entry[ "media$group" ][ "media$thumbnail" ][ 0 ].width + '" height="' + data.entry[ "media$group" ][ "media$thumbnail" ][ 0 ].height + '" alt="Default Thumbnail" title="Default Thumbnail" align="right"/>' );
    document.write( '<span class="descvi-t"><b>Título:</b> <strong>' + data.entry[ "title" ].$t + '</strong></span><br/>' );
    document.write( '<b>Autor:</b> ' + data.entry[ "author" ][ 0 ].name.$t + '<br/>' );
    document.write( '<b>Publicado:</b> ' + new Date( data.entry[ "published" ].$t.substr( 0, 4 ), data.entry[ "published" ].$t.substr( 5, 2 ) - 1, data.entry[ "published" ].$t.substr( 8, 2 ) ).toLocaleDateString( ) + '<br/>' );
    document.write( '<b>Duración:</b> ' + Math.floor( data.entry[ "media$group" ][ "yt$duration" ].seconds / 60 ) + ':' + ( data.entry[ "media$group" ][ "yt$duration" ].seconds % 60 ) + ' (' + data.entry[ "media$group" ][ "yt$duration" ].seconds + ' Segundos)<br/>' );
    document.write( '<b>Reproduccion(es):</b> '+ data.entry[ "yt$statistics" ].viewCount +  '<br/>' );
   document.write( '<b>Estadísticas:</b> ' + data.entry[ "yt$statistics" ].favoriteCount + ' Favorito(s); ' + '<br/>' );
    document.write( '<b>Descripción:</b>' );
    document.write(  data.entry[ "media$group" ][ "media$description" ].$t.replace( /\n/g, '<br/>' ) );
   document.write( '<br/><a href="' + data.entry[ "media$group" ][ "media$player" ].url + '" target="_blank">Ver en YouTube</a>' );
  }
//]]>
</script>

Luego agregamos los estilos CSS.

Poner el siguiente código arriba de ]]></b:skin>

.descvi{width:75%;margin-left:auto;margin-right:auto;border:10px solid #333;padding:10px;background:#111;color:#fff;font-size:12px;line-height:18px}
.descvi img{margin:0px;padding: 8px;background: #333;border: 0;}
.descvi a{padding-right: 44px;background: transparent ;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibqd0mhxjj9Kn16kyv_HfoE2eHB1ujKscqpkGR14FI3yH4WmivTCNtoqj6sg-_yt-jZ08OdoTnw7EV5wI01F_zhzn1oVfvU_5FcOdsUINMAC1lK8GmMJqwdxFgYJUaCUk8EZYY3yy6F0cZ/s0/youtube.jpg) center right no-repeat;font-size:16px ;margin-top:3px}
.descvi-t strong{color:red;font-size:14px;}
.descvi-t b{color:#fff;font-size:12px;}

Cambiar los colores y la imagen a su gusto.

Para mostrar la descripción en las entradas, agregamos en la pestaña "Edición de HTML" el siguiente código:

<div class="descvi">
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos/6jGPJyLdDck?v=2&amp;alt=json-in-script&amp;callback=youtubeFeedCallback"></script></div>

Cada ves que pongamos el código debemos de cambiar la ID del vídeo marcado en rojo.

Si queremos mostrar la imagen mas grande, cambiamos el "2" por "1". (tener en cuenta de cambiar el estilo CSS)

Vídeo Galería con Css y Javascript

Mi nuevo proyecto.

Se puede configurar desde el estilo CSS.

El código se debe colocar en un gadget HTML abajo de la cabecera.

Esta configurado para un ancho de 1000px, y para mostrar 16 vídeos.

Si se quiere se puede quitar o agregar vídeos.

Solo agregar o quitar la siguiente línea.

<a href="http://www.youtube.com/v/boDvXJLau1A" onclick="return cambiarvideo(this.href)" title="Video 2"><img src="http://img.youtube.com/vi/boDvXJLau1A/default.jpg" /></a>

El link del vídeo:

http://www.youtube.com/v/boDvXJLau1A

Cambiar la ID del vídeo (boDvXJLau1A) por la ID del vídeo a mostrar.

La medida del vídeo son de 425 x 344. (Se puede cambiar desde el código Javascript)


La imagen a mostrar:

http://img.youtube.com/vi/boDvXJLau1A/default.jpg

Cambiar la ID (boDvXJLau1A) que es el misma ID del vídeo.

De esta forma generamos una imagen thumbnail.

La medida de las imágenes son de 100px x 70px. (Se puede cambiar desde el estilo CSS)


Pueden elegir cuatro formas de mostrar el vídeo.

Los ejemplos y su respectivo código se encuentra en cada entrada.

• El vídeo se muestra a la derecha
• El vídeo se muestra a la izquierda
• El vídeo se muestra arriba
• El vídeo se muestra abajo

Ejemplo del CSS del vídeo mostrado a la derecha:

         ........Imagen thumbnail.........
.contvideogaleria img{width:100px;height:70px;padding:5px;border:1px solid #fff}

         ........El cuerpo contenedor y la imagen a la izquierda.........

.contvideogaleria{width:100%;float:left;background:black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZsBw-6Pz74r0piFxanmjczny3yNpkTf-zwR4OV08TT5WivBox4SWq6OVJK-uschlOe3rTfxx-9tfWTnXwfP-luj8ouvxsk1rZpDudGAxluR9HcS2yzuCbYX6UjFnPsx8Y2jzpLyhTjlU/s1600/youtube.png) no-repeat center left;}

         ........El cuerpo contenedor de las imágenes thumbnail.........
.contvideogaleria .contvideogaleriaimg{margin:20px;margin-left:30px;/margin-left:20px;margin-right:5px}

         ........El cuerpo contenedor del vídeo.........
.contvideogaleria #videogaleria{float:right;margin-right:20px;margin-top:15px;background:red url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrbeVK41kCyQtuvpMMg_XvOStG0QCqgYKu5p1zAEI_TiA0uAQd8ohGnEu90ixMJrdNQ_DWX60_YerxT3BVla8sAEyz8QqudoSVekg0PAbSomRyIkSiMByivkYDjvqmKBuANXetbbBr0luu/s1600/video-galeria-vku.png) no-repeat center ;}

Personalizar cambiando medidas, borde, imagen de la izquierda, color del fondo y margenes.

Notarán que hay margenes que tienen delante un /, esto es solo para Internet Explorer.

Los comentarios dejarlos en esta entrada y no en el blog de los ejemplos.

Espero que les sea de utilidad.

Inserta vídeos de YouTube desde tu blog

Blogger permite darle más vida a tu blog con vídeos: si tienes un archivo de vídeo puedes subirlo a tu blog. Pero, sabemos que muchos de ustedes elijen incrustar vídeos de YouTube directamente en sus entradas.

Actualmente agregar un vídeo de YouTube es un proceso fácil, pero incluye varios pasos. En caso de que no tengas el código de insersión del vídeo, deberías abrir una nueva ventana o pestaña en el navegador, ir a YouTube. com, buscar el vídeo y reproducirlo para asegurarte de que es el correcto. Una vez que hayas copiado el código de inserción del vídeo, debes volver a tu entrada de Blogger e insertarlo manualmente. ¡Buenas noticias! Hemos añadido una función que hace que este proceso sea mucho más sencillo. Ya no deberás abrir una nueva ventana o pestaña desde tu editor de texto*, sólo tienes que hacer click en “Insertar un vídeo” (ubicado en la barra de herramientas). Además de la ya existente opción de “Insertar un vídeo”, verás dos nuevas pestañas: “Desde YouTube” y “Mis Vídeos de YouTube”.

 

* esta funcionalidad está disponible únicamente en el Nuevo Editor. Para utilizar el Nuevo Editor, visita la pestaña “Configuración” y elige “Editor actualizado” debajo de la opción “Configuración global”.

En la pestaña “Desde YouTube” podrás buscar, navegar y reproducir vídeos de YouTube, todo dentro de la interfaz de “Insertar un vídeo”. En caso de que tengas tus propios vídeos en YouTube podrás verlos en la pestaña “Mis vídeos de YouTube”.

Una vez que hayas seleccionado el vídeo, haz clic en “Seleccionar” para insertar el vídeo en tu entrada. Verás una imagen pequeña del vídeo que podrás mover alrededor de tu entrada, arrastrando y soltando.

 

¡Ah! Y en caso de que no lo sepan, agregar un vídeo de YouTube en tu blog es muy fácil. Mientras mires un vídeo en YouTube haz click en “Compartir” y elige Blogger. Sólo tienes que elegir el blog donde deseas compartir el vídeo (en caso de que tengas más de un blog), agregar contenido y publicar la entrada. ¡Disfruta de agregar vídeos a tu blog!

El equipo de Blogger

Fuente

Y bueno, algún día tentremos mejores noticias.

Facebook y YouTube en lista de blogs

En la anterior entrada Twitter en lista de blogs me preguntaban Pili del blog Desde mi objetivo y Claudia del blog Cocofansclub ¿Cómo poner el de You Tube y Facebook.

Claudia me respondió que lo pudo hacer con el de You Tube.

Primero leer la entrada anterior "Twitter en lista de blogs"

You Tube en lista de blogs.

Solo hay que agregar el link de nuestra página de youtube.

En mi caso es http://www.youtube.com/user/thevku

Facebook en lista de blogs

Acá es un poco mas difícil.

Yo tuve que modificar unos datos en mi perfil de Facebook.

Los pasos a seguir son los siguientes:

1º) Entrar a nuestra cuenta de facebook.

2º) Ir a nuestro perfil.

3º) Van a ver en la sidebar de la izquierda un lugar donde el titulo es "Notas".
Hacer clic en "Ver todas" se abre una nueva pestaña.
Van a ver a la derecha "Suscríbete a estas notas" abajo hay un bóton azul RSS, donde dice notas de (usuario)
Abrir ese bóton.
Copiar el link de la nueva página abierta y ponerlo igual que con Twitter y You Tube.

Esto mostrara unicamente las notas y no lo del muro.

También se puede hacer lo mismo para mostrar las notificaiones que se encuentra en el menu de arriba en la imagen del mundo.

Si no tienen activado las Notas hay que agregarlas en las pestañas desde (+)

Ver ejemplo:

Si se quiere mostrar lo escrito en el muro hacerlo directamente desde facebook.
Crear una insignia de perfil y marcar Actualizaciones de estado.