Думаю, что на разных сайтах реализация различается, но вероятнее всего, подтягиваются метаданные конкретного ролика - что-то наподобие Open Graph protocol (у Ютьюба наверняка есть что-то подобное, начните с просмотра кода страницы), они парсятся, выбираются нужные. Их отображение - как вам понравится.
Картинки - по принципу
https://img.youtube.com/vi/<youtube_video_id>/[0-3].jpg
ID - понятно, 0-3 - варианты размеров (выберите нужный).
Вот для вашего ролика:
https://img.youtube.com/vi/bhUAIrV-PIc/0.jpg
Либо
https://img.youtube.com/vi/<youtube_video_id>/default.jpg
Вместо default.jpg можно подставлять mqdefault.jpg, sddefault.jpg, hqdefault.jpg и maxresdefault.jpg. Это тоже разное качество, но не у всех роликов есть все варианты.
Также загляните в API:
https://developers.google.com/youtube/v3/
Но сейчас, по-моему, нужно получать ключ, просто так им не побалуешься.
Кстати, для 2-й версии API находится вот такой код:
Get Youtube video details with JavaScript<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
var vidid = "bhUAIrV-PIc";
function getYouTubeInfo() {
$.ajax({
url: "http://gdata.youtube.com/feeds/api/videos/"+vidid+"?v=2&alt=json&orderby=published&prettyprint=true",
dataType: "jsonp",
success: function (data) {parseresults(data)}
});
}
function parseresults(data) {
var ytvtit = data.entry.title.$t;
var ytvcat = data.entry.media$group.media$category[0].label;
var ytvpub = data.entry.published.$t.substr( 0, 10 );
var ytvath = data.entry.author[0].name.$t;
var ytvatl = data.entry.media$group.media$credit[0].$t;
var ytvdur = data.entry.media$group.yt$duration.seconds;
var ytvrta = data.entry.gd$rating.average.toFixed(1);
var ytvrtm = data.entry.gd$rating.max;
var ytvrtc = data.entry.gd$rating.numRaters;
var ytvlks = data.entry.yt$rating.numLikes;
var ytvdlk = data.entry.yt$rating.numDislikes;
var ytvvwc = data.entry.yt$statistics.viewCount;
var ytvfav = data.entry.yt$statistics.favoriteCount;
var ytvcmc = data.entry.gd$comments.gd$feedLink.countHint;
var ytvdes = data.entry.media$group.media$description.$t;
var ytvurl = 'https://www.youtube.com/watch?v='+vidid;
var ytvtmb0 = data.entry.media$group.media$thumbnail[0].url;
$('#ytvtitle').html(ytvtit);
$('#ytvcatgry').html(ytvcat);
$('#ytvpublish').html(ytvpub);
$('#ytvauthr').html('ytvath');
$('#ytvduration').html(ytvdur + ' Seconds' );
$('#ytvrtngavrg').html(ytvrta);
$('#ytvrtngmax').html(ytvrtm);
$('#ytvrtngcnt').html(ytvrtc);
$('#ytvlks').html(ytvlks);
$('#ytvdislks').html(ytvdlk);
$('#ytvviewcount').html(ytvvwc);
$('#ytvfavcount').html(ytvfav);
$('#ytvthumb').html('
');
$('#ytvcomment').html(ytvcmc);
$('#ytvdescription').html(ytvdes);
$('#ytvurl').html('Watch on YouTube');
$('#ytvply').html('
');
}
$(document).ready(function () {
getYouTubeInfo();
});
</script>
