Как с YouTube достать превью?

С ролика Ютуб очень просто вытянуть картинку. Адрес страницы YouTube (см. в адресной строке браузера) содержит идентификатор видео:

http://www.youtube.com/watch?v=JMJXvsCLu6s
Код изображения
<img src="//img.youtube.com/vi/JMJXvsCLu6s/3.jpg" width="120" height="90">
<img src="//img.youtube.com/vi/JMJXvsCLu6s/2.jpg" width="120" height="90">
<img src="//img.youtube.com/vi/JMJXvsCLu6s/1.jpg" width="120" height="90">
<img src="//img.youtube.com/vi/JMJXvsCLu6s/default.jpg" width="120" height="90">
<img src="//img.youtube.com/vi/JMJXvsCLu6s/mqdefault.jpg" width="320" height="180">
<img src="//img.youtube.com/vi/JMJXvsCLu6s/hqdefault.jpg" width="480" height="360"> <img src="//img.youtube.com/vi/JMJXvsCLu6s/0.jpg" width="480" height="360">
<img src="//img.youtube.com/vi/JMJXvsCLu6s/sddefault.jpg" width="640" height="480">
<img src="//img.youtube.com/vi/JMJXvsCLu6s/maxresdefault.jpg">
Код видео YouTube любого размера (см. как сделать резиновое)
<iframe src="//www.youtube.com/embed/JMJXvsCLu6s" frameborder="0" allowfullscreen width="882" height="501"></iframe>

Простой пример использования

Обычно я предпочитаю модальные окна на CSS, чтоб видео подгружалось сразу, чтоб оставшийся экран гас. А тут брат сообщил, что часто окно с YouTube уменьшает и уводит на задворки экрана монитора. То есть он и смотрит ролик в полглаза, и, скажем, играет в покер. Поэтому сегодня видеоролик открываем именно в другом окне браузера. переправа

<a href="http://www.youtube.com/embed/JMJXvsCLu6s" target="_blank" onClick="window.open(this.href, '', 'width='+screen.availWidth/2+',height='+screen.availHeight/2+',top='+screen.availHeight/4+',left='+screen.availWidth/4); return false;">

<img title="видео: переправа" alt="переправа" src="http://img.youtube.com/vi/JMJXvsCLu6s/mqdefault.jpg" height="180" width="320"/>

</a>
в f t
наверх ↑

30 комментариев:

teleinfo
Как, как, Скриншотом щелкнуть и обрезать.
NMitra
Не, есть ScreenHunter и ему подобные :))) http://shpargalkablog.ru/2010/07/word-sdelat-kartinkoi.html
Sk Omb
круто
Анонимный
+1
Анонимный
Полный список:
http://img.youtube.com/vi//default.jpg
http://img.youtube.com/vi//hqdefault.jpg
http://img.youtube.com/vi//mqdefault.jpg
http://img.youtube.com/vi//sddefault.jpg
http://img.youtube.com/vi//maxresdefault.jpg
NMitra
Спасибо, ценная информация! Статью подправила.
Анонимный
Спасибо, очень помогло)
FOMUVI
Расскажите, пожалуйста, как управлять высотой и шириной окна в данном случае
NMitra
screen.availWidth - это ширина экрана браузера
screen.availWidth/2 - это половина ширины экрана браузера

или

width=500,height=

где 500 или др. значение это фиксированное значение в px

Посмотрите тут http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html Нужно ввести текст ссылки/адрес изо и выбрать пункт "открыть в новом окне"
Андрей Белоусов
А как подключить данный код к WordPress? У меня почему то ничего не отображается!!!
NMitra
При написании поста нужно переключиться в режим "HTML" ( http://yandex.ru/yandsearch?lr=51&text=%D0%BA%D0%B0%D0%BA+%D0%B2%D1%81%D1%82%D0%B0%D0%B2%D0%B8%D1%82%D1%8C+%D0%BA%D0%BE%D0%B4+html+%D0%BD%D0%B0+%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%83+%D0%B2+wordpress&csg=7461%2C20291%2C10%2C14%2C4%2C0%2C0 )
Андрей Белоусов
То-то и оно, что я подключал через HTML.
В результате, ничего, из приведенного на данной странице - не обнаружил.
А простое введение кода я знаю. Но при этом, нет дополнительного окна!!!
NMitra
Смотрите, вот видео, где перевод сделан вручную http://shakin.ru/google/changing-pages.html (само видео http://www.youtube.com/embed/bFYruTb5Auk ). Здесь также пользователю нужно включать субтитры, но они идут не от переводчика Google
Андрей Белоусов
К сожалению, по приведенной Вами ссылке, ничего, касающегося встраивания HTML-кода на страницу WordPress я не обнаружил! :( Может быть вы еще что нибудь посоветуете для подгрузки всплывающего окна! :0)
NMitra
На комментарий 13 не обращайте внимание, я уже путаю страницы, комментаторов и вопросы.

Не может быть, что такой простой вариант не работает. На этой странице http://shpargalkablog.ru/2011/02/modalnoe-okno-css.html есть экземпляр посложнее.

Покажите страницу (URL-адрес), где вы разместили код, интересно что там в исходном коде.
Андрей Белоусов
Вот ссылка - http://www.landshaft-online.ru/?cat=19
+ В результате вставки кода ломается вся архитектура страницы :(
Андрей Белоусов
А на счет комментария №15, то в открывшемся модальном окне отсутствует возможность его закрытия!!! :0)
NMitra
Комментарий 16. А где картинка в ссылке? <img title="видео: переправа" alt="переправа" src="http://img.youtube.com/vi/p5rENYZQagE/mqdefault.jpg" height="180" width="320"/>

Комментарий 17. Нужно нажать на любое место вне видео. Кнопку закрыть думаю приспособить сумеете.
Андрей Белоусов
Огромное Вам СПАСИБО! Разобрался!!! :0)
Иван Звягин
Онлайн сервис, который это реализовал. Чтобы сэкономить время получаешь кнопки со всеми имеющимся качеством http://saveyoutube.ru/
Админ можешь сам убедится, это реально работает и времени сэкономит много
NMitra
Реально работает :) Но так ли много времени экономит?
Иван Звягин
Думаю много, когда массово постишь видео на свой сайт. Тем более сразу видно в каком разрешении есть картинки. С другой стороны сервис больше для тех, кто хочет их хранить на своем хостинге. В вашем случае удобнее, если при постинге использовать урл ютуба
NMitra
Статью доработала. Надеюсь так стало удобней пользоваться. Спасибо, что обратили внимание и начали дискуссию!
Анонимный
Дякую! Вирішив поставлену задачу за 5 хвилин))
NMitra
Рада помочь!
Юрий Смурыгин
А как сделать затемнение на весь экран? ) я про "Простой пример использования"... дело в том, что мне нужно вывести в отдельное окно не одно видео, а целый плейлист с ютуба... не нашел я такой функции в модальных окнах, а этот "Простой пример..." прекрасно справляется с нужной мне задачей... )
NMitra
У body пропишите что-то типа

body:after {
position: fixed;
z-index: 10;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0,.5);
}

А для общения между окнами используйте window.opener: http://shpargalkablog.ru/2014/10/window-open-javascript.html#two

Посмотрите ещё тут про видео http://shpargalkablog.ru/2011/02/modalnoe-okno-css.html
Юрий Смурыгин
что-то не работает у меня "body:after {..." или я прописываю где-то не там! ) ну да ладно, отказались от плейлиста, решили каждое видео прописывать отдельно в модальном окне... ) да, кстати, сколько я не пробовал модальных окон - ни одно ни умеет показывать именно плейлист с ютуба! ) и у Вас тоже, делал по этому образцу: http://shpargalkablog.ru/2011/02/modalnoe-okno-css.html...
NMitra
Используется самое простое. В остальных случаях нужно читать документацию https://developers.google.com/youtube/iframe_api_reference
Юрий Смурыгин
Спасибо, солнце! @->-