Превью видео Youtube

Сразу к делу

Чтобы получить скриншот (превью) видео нудно обратиться по такому адресу

http://img.youtube.com/vi/[video_id]/[0-3].jpg

video_id -это id вашего видео (неожиданно, правда?), его можно взять в url-адресе видео. Например есть видео по такой ссылке http://www.youtube.com/watch?v=UOQI4lCM-2c, его id = UOQI4lCM-2c.

[0-3] — это цифры от 0 до 3, если указать 0 — получите скриншот размером 480×360, если 1-3 — 120×90, но разные.

Для видео указанно чуть выше, url большой картинки будет таким http://img.youtube.com/vi/UOQI4lCM-2c/0.jpg

Зачем это нужно?

Да все просто, если у вас видео-блог или сайт на страницах которого может быть много видео, то скорость загрузки может вас сильно расстроить. Чтобы этого избежать можно брать только превью видео, без загрузки самого видео. Но тут может возникнуть закономерный вопрос: «Ну хорошо, есть у меня превью, а как начать воспроизводить само видео при клике на картинку?» А я вам отвечу: «А это правильный вопрос. Программа завершена.» — в смысле, все достаточно просто. Берем javascript в одну руку (в моем случае jquery), берем ссылку на видео в другую руку и (херачим пока видео не будет воспроизводиться =) ) в блок где была картинка вставляем видео с автозапуском. Как получить ссылку для вставки видео в блог объяснять не буду (все просто, под видео на youtube, есть ссылочка «поделиться», там надо выбрать html-код). Скорее всего вы получите код такого формата

<iframe width="480" height="360"
src="//www.youtube.com/embed/UOQI4lCM-2c?rel=0"
frameborder="0" allowfullscreen></iframe>

 Такое видео не будет играть автоматом, а чтобы заиграло надо добавить к url autoplay=1, вот так

<iframe width="480" height="360" 
src="//www.youtube.com/embed/UOQI4lCM-2c?rel=0&amp;autoplay=1" 
frameborder="0" allowfullscreen></iframe>

Вот это видео заиграет сразу после вставки. Кстати, обратите внимание, что url без http: в начале, по большому счету, если это живой сайт, то все будет работать, а вот если это верстка, то надо будет добавить это протокол.

А как заменить-то?

Сначала кусок верстки:

<div class="this_video">
	<img class="start_this_video" 
	src="http://img.youtube.com/vi/UOQI4lCM-2c/0.jpg" alt="" />
</div>

И скрипт:

$('.start_this_video').click(function(){
	$('.this_video').html('<iframe width="480" height="360" 
	src="http://www.youtube.com/embed/UOQI4lCM-2c?autoplay=1" 
	frameborder="0" allowfullscreen></iframe>');
});

Вот и все. Достаточно просто, не правда ли? =)

Приведу рабочий пример на примере все того же видео

Кстати, чтобы получить id изображения из url можно использовать вот такой PHP-код

$url_video = 'http://www.youtube.com/watch?v=aCnIuxvnzAU';
preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $url_video, $match);
$Youtube_video_id = $match[1];

До кучи, чтобы можно было поэксперементировать у себя на компьютере, Вот вам ссылка на архив с примером