Addon prettyphoto youtube

[Theriddler]

This is een slightly addon for the Prettyphoto youtube bbcode.
Since the bbcode does not show the title of an youtube movie, this little addon does do the job and places various info underneath the movie.

I'm not the author of this, just found it after searching and wanted it to share.

Find:

Code: Select all

<a href="http://www.youtube.com/watch?v={IDENTIFIER}" rel="prettyPhoto" title="" style="border-bottom:0;"><img style="width: 230px; height: 197px; border:1px solid black;" src="http://i.ytimg.com/vi/{IDENTIFIER}/default.jpg" alt="YouTube" /></a>

Add after:

Code: Select all

<br />
<script type="text/javascript">
  function youtubeFeedCallback( data )
  {
    document.writeln( '<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" align="right"/>' );
    document.writeln( '<b>Title:</b> ' + data.entry[ "title" ].$t + '<br/>' );
    document.writeln( '<b>Author:</b> ' + data.entry[ "author" ][ 0 ].name.$t + '<br/>' );
    document.writeln( '<b>Published:</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.writeln( '<b>Duration:</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 + ' seconds)<br/>' );
    document.writeln( '<b>Rating:</b> ' + new Number( data.entry[ "gd$rating" ].average ).toFixed( 1 ) + ' out of ' + data.entry[ "gd$rating" ].max + '; ' + data.entry[ "gd$rating" ].numRaters + ' rating(s)' + '<br/>' );
    document.writeln( '<b>Statistics:</b> ' + data.entry[ "yt$statistics" ].favoriteCount + ' favorite(s); ' + data.entry[ "yt$statistics" ].viewCount + ' view(s)' + '<br/>' );
    document.writeln( '<br/>' + data.entry[ "media$group" ][ "media$description" ].$t.replace( /\n/g, '<br/>' ) + '<br/>' );
    document.writeln( '<br/><a href="' + data.entry[ "media$group" ][ "media$player" ].url + '" target="_blank">Watch on YouTube</a>' );
  }
</script>
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos/{IDENTIFIER}?v=2&alt=json-in-script&callback=youtubeFeedCallback"></script>

You can remove soms line's from the code to fit your needs. for example remove:

Code: Select all

document.writeln( '<b>Rating:</b> ' + new Number( data.entry[ "gd$rating" ].average ).toFixed( 1 ) + ' out of ' + data.entry[ "gd$rating" ].max + '; ' + data.entry[ "gd$rating" ].numRaters + ' rating(s)' + '<br/>' );

Have fun

[slash]

Demo?

[mobius]

thanks for posting

interesting idea but :

using the code above prints 2 thumbnails, one above and one to the right. the line below is for the right side thumbnail

Code: Select all

    document.writeln( '<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" align="right"/>' );

and it is bad for xhtml strict

Validation Output: 23 Errors.

maybe it can be done a better way.

[Theriddler]

thanks for posting

interesting idea but :

using the code above prints 2 thumbnails, one above and one to the right. the line below is for the right side thumbnail

Code: Select all

    document.writeln( '<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" align="right"/>' );

and it is bad for xhtml strict

Validation Output: 23 Errors.

maybe it can be done a better way.

u are right, the thumbnail from above is the replacement for youtube video, when you click on it, it will show the video in the prettyphoto frame.

I removed a couple of lines from within the code.

I removed:

Code: Select all

document.writeln( '<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" align="right"/>' );

also Removed:

Code: Select all

document.writeln( '<b>Author:</b> ' + data.entry[ "author" ][ 0 ].name.$t + '<br/>' );

and more lines removed to fit my needs.

so eventualy i ended up in this:

Code: Select all

<br />
<script type="text/javascript">
  function youtubeFeedCallback( data )
  {
    document.writeln( '<b>Title:</b> ' + data.entry[ "title" ].$t + '<br/>' );
    document.writeln( '<b>Duration:</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 + ' seconds)<br/>' );
    document.writeln( '<br/>' + data.entry[ "media$group" ][ "media$description" ].$t.replace( /\n/g, '<br/>' ) + '<br/>' );
    document.writeln( '<br/><a href="' + data.entry[ "media$group" ][ "media$player" ].url + '" target="_blank">Watch on YouTube</a>' );
  }
</script>
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos/{IDENTIFIER}?v=2&alt=json-in-script&callback=youtubeFeedCallback"></script>

i do know it is not xhtml strict, but maybe someone could shine a light in this

The code can be used with every youtube bbcode, just place it underneath.