Overlaying text from YouTube API on image thumbnail
===

I've setup a script that displays recent video thumbnails from a YouTube playlist using the the data API.

I'd like to grab the first three characters from $title and overlay it on a thumbnail, how can I grab this information and display it? I can do the CSS, I'm just unsure of how to call it.

Current progress is in the videos pod at http://charlieswebsites.co.uk/fearofmobs/site/

Current PHP code is:

    <?php
    get_playlists();

    function get_playlists(){
    $data = file_get_contents("http://gdata.youtube.com/feeds/api/playlists/C82EBDAC0429B6A2?                  orderby=published&max-results=12");
    $xml = simplexml_load_string($data);
    
    foreach($xml->entry as $playlist){
    $media = $playlist->children('http://search.yahoo.com/mrss/');
    $attrs = $media->group->thumbnail[1]->attributes();
    $thumb = $attrs['url'];
    $attrs = $media->group->player->attributes();
    $video = $attrs['url'];
    $title = substr( $media->group->title, 27);
    $url = $video;
    
    parse_str( parse_url( $url, PHP_URL_QUERY ), $my_array_of_vars );
    $vid_Id = $my_array_of_vars['v'];
    
    $thumbnail .= '<div style="float:left; cursor:pointer;">
    <p class="crop"><a class="videobox various iframe" href="http://www.youtube.com/embed/' .     $vid_Id . '?autoplay=1&hd=1"><img src="' .$thumb . '" title="' . $title . '" width="74"     height="56"/></a></p></div>';
    }print $thumbnail;}
    ?>