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)