var ytp_width = 360, //размер плеера ytp_height = 223; $(function () { $('.youtube-player').each(function () { var src = $(this).attr('src'); var matches = /\/([\w\d\-_]+)$/.exec(src); if (matches !== null && matches[1]){ var code = matches[1]; var node = this; $.getJSON('http://gdata.youtube.com/feeds/api/videos/'+code+'?v=2&alt=jsonc',function(data,status,xhr){ var dur = String_toHHMMSS(data.data.duration); var title = data.data.title+' ('+dur+')'; var link = 'http://www.youtube.com/watch?v='+code; var html = '<div> \ <div class="ytp"> \ <div class="ytp-title-bg"> \ <div class="ytp-title">'+title+'</div> \ </div> \ <img id="ytp-img-'+code+'" class="ytp-img" src="http://img.youtube.com/vi/'+code+'/mqdefault.jpg"></img> \ </div> \ <a href="'+link+'" class="ytp-link" target="_blank">'+link+'</a> \ </div>'; $(html).insertAfter(node); $(node).remove(); $("#ytp-img-"+code).click(function(){ console.log('aye'); var flash = '<iframe title="YouTube video player" class="youtube-player" \ type="text/html" width="'+ytp_width+'" height="'+ytp_height+'" \ src="http://www.youtube.com/embed/'+code+'?autoplay=1"\ frameborder="0" allowFullScreen></iframe>'; var base = $(this).parent().parent(); $(flash).insertBefore(base); base.remove(); }); }); } }); }); function String_toHHMMSS(t){ var sec_num = parseInt(t, 10); var hours = Math.floor(sec_num / 3600); var minutes = Math.floor((sec_num - (hours * 3600)) / 60); var seconds = sec_num - (hours * 3600) - (minutes * 60); var time = '' if (hours < 10) {hours = "0"+hours;} if(hours!='00') time+=hours+':'; if (minutes < 10) {minutes = "0"+minutes;} if(minutes!='00') time+=minutes+':'; if (seconds < 10) {seconds = "0"+seconds;} time+=seconds; return time; } $("head").append('<style type="text/css"> \ .ytp{ border: 1px dashed #F7BD6A; width: '+ytp_width+'px; height: '+ytp_height+'px; cursor: pointer; background: #000; } \ .ytp-img{ width: '+ytp_width+'px; height: '+(ytp_height-23)+'px; } \ .ytp-title{ color: #FFFFFF; margin-left: 10px; font-size: 0.95em; text-shadow: 4px 4px 2px #000000; cursor: text; } \ .ytp-title-bg{ background: #323232; opacity: 0.8; min-height: 20px; cursor: default; } \ .ytp-link{ background: url(\'https://youtube.com/favicon.ico\') no-repeat scroll left center transparent; color: #F60; \ font-size: 0.8em; padding-left: 20px; margin-left: 5px; margin-top: 1px; border-bottom: 1px dotted #F60;}</style>'); //mmmaximum zhopa4ni4estvo, uwahahahah