Youtube video gallery for website

Question

Dear All,
I am try to make a some video gallery for my website clients given to a format is given below for your reference
they want some thing like this. please help me how can do?

Answer 1

thanks rik
i get a code that code youtube video link goes some abstract way WEBLINK
how can do something like this
<!--Youtube Video Script Start Here-->
<script>
$(function() {
var list_data='';
var aur='';
var myurl='';
    $.getJSON('http://gdata.youtube.com/feeds/api/users/xyz/uploads?&alt=json-in-script&callback=?', function(data) {
        $.each(data.feed.entry, function(i, item) {
                        var updated = item.updated;
            var url = item['media$group']['media$content'][0]['url'];
            var thumb = item['media$group']['media$thumbnail'][1]['url'];
           // var numViews = item['yt$statistics']['viewCount'];
                              var tm = item['media$group']['media$content'][0]['duration'];
                              var mytm=Math.floor(tm / 60) +':'+Math.floor(tm % 60);
                              var ttl=item.title.$t;
                              myurl = myurl+url+'$$';
                              myurl=myurl.split("$$");
        list_data += '<div><img  id="'+ url+'" src="'+ thumb +'"><p><b>'+ttl+'</a><br> <span>Duration :'+ mytm+'</span></p></div>';
                     $("#youtube_latest").html("<object width=\"410\" height=\"300\"><param name=\"movie\" value=\"" + myurl[0] + "\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"" + myurl[0] + "\" type=\"application/x-shockwave-flash\" wmode=\"transparent\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"410\" height=\"300\"></embed></object>");
          $(".cont").html(list_data);
                    //$(list_data).appendTo(".cont");
                    $(".cont img").click(function(){
                    iurl= $(this).attr('id');
                    //alert(iurl);
                    $("#youtube_latest").html("<object width=\"410\" height=\"300\"><param name=\"movie\" value=\"" + iurl + "\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"" + iurl + "\" type=\"application/x-shockwave-flash\" wmode=\"transparent\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"410\" height=\"300\"></embed></object>");