Как посмотреть превью видео на YouTube и скачать обложку

Сегодня мини урок, о том как легко и просто вытянуть картинку с ютуба. Данный урок в первую очередь пригодиться веб-разработчикам, может еще кому нибудь. И так открываем любое видео с YouTube, например вот это https://www.youtube.com/watch?v=_vAUQgOalL4 , если вы заметили, этот адрес содержит идентификатор видео: _vAUQgOalL4, он нам как раз и нужен, также идентификатор можно узнать нажав на кнопку поделиться

Получаем картинки с YouTube на основе идентификатора видео

В принципе не буду углубляться, все просто, ниже перечислю адреса которые выводят разные превью:

https://img.youtube.com/vi/идентификатор/default.jpg
https://img.youtube.com/vi/идентификатор/mqdefault.jpg
https://img.youtube.com/vi/идентификатор/hqdefault.jpg
https://img.youtube.com/vi/идентификатор/sddefault.jpg
https://img.youtube.com/vi/идентификатор/maxresdefault.jpg

Ну и давайте разберем, что какая ссылка выводит, для этого подставим за место слова идентификатор, идентификатор видео:

https://img.youtube.com/vi/_vAUQgOalL4/default.jpg (120px на 90 px с черными полосами сверху и с низу)

https://img.youtube.com/vi/_vAUQgOalL4/mqdefault.jpg (320px на 180px — без полос)

https://img.youtube.com/vi/_vAUQgOalL4/hqdefault.jpg (480px на 360px)

https://img.youtube.com/vi/_vAUQgOalL4/sddefault.jpg  (640px на 480px)

https://img.youtube.com/vi/_vAUQgOalL4/maxresdefault.jpg (1200px на 720px — без полос — тоже часто использую)

Ну а дальше, можно это использовать, к примеру при создании видео блога, вот вам к примеру статья: создание видео блога на MODX Revolution (пока в разработке, скоро появиться). Ну или еще как нибудь.

Как открыть превью видео на YouTube

У каждого ролика YouTube есть идентификатор — короткая последовательность букв, цифр и других допустимых символов. По нему можно открыть обложку отдельно от видеоплеера, посмотреть ее и сохранить как обычное изображение.

Для начала используем такой адрес:

https://img.youtube.com/vi/ID/maxresdefault.jpg

Вместо ID нужно вставить идентификатор вашего видео. Ниже покажу, где его найти и что делать, если большая картинка не открывается.

Где найти идентификатор видео

Откройте нужный ролик и посмотрите на адрес в браузере. В обычной ссылке идентификатор находится после v=.

Например, в старом примере этой статьи использовалась ссылка:

https://www.youtube.com/watch?v=_vAUQgOalL4

Идентификатор этого видео:

_vAUQgOalL4

Копируйте его целиком, включая знак подчеркивания в начале. Не добавляйте пробелы, кавычки и оформление текста.

Это архивный скриншот, но принцип тот же: нам нужна часть ссылки, которая обозначает конкретное видео.

Если в ссылке есть дополнительные параметры

После идентификатора могут идти настройки времени, плейлиста и другие параметры. Их копировать не нужно.

Например:

https://www.youtube.com/watch?v=_vAUQgOalL4&t=30

Здесь ID по-прежнему _vAUQgOalL4. Часть &t=30 относится к параметрам ссылки.

Если ссылка короткая или ведет на Shorts

Ссылку можно получить и через кнопку «Поделиться». Ее формат может отличаться:

Не копируйте ссылку целиком в место для ID. Сначала выделите только идентификатор, а затем вставьте его в адрес картинки.

Как посмотреть обложку отдельно от видео

Теперь подставим ID из примера в подготовленный адрес:

https://img.youtube.com/vi/_vAUQgOalL4/maxresdefault.jpg

Скопируйте полученную строку в адресную строку браузера и нажмите Enter. Если этот вариант превью доступен, откроется изображение без страницы YouTube и без видеоплеера.

Для своего ролика замените _vAUQgOalL4 на его ID.

Если вместо большой обложки открылась маленькая заглушка или появилась ошибка, проверьте идентификатор и попробуйте другой вариант размера. Отсутствие maxresdefault.jpg еще не означает, что у видео вообще нет превью.

Какие размеры превью можно получить

В конце адреса указывается имя варианта изображения. Чтобы проверить другой размер, достаточно заменить эту последнюю часть, оставив тот же ID.

Это распространенные варианты, а не гарантия одинакового результата для каждого ролика. Проверяйте фактически открывшуюся картинку.

Ниже сохранил изображения из исходного примера, чтобы разница была видна не только по цифрам.

Маленькая миниатюра: default.jpg

https://img.youtube.com/vi/_vAUQgOalL4/default.jpg

В этом примере картинка имеет размер 120 × 90. Для большого блока на сайте она слишком маленькая: увеличение не добавит деталей.

Среднее превью: mqdefault.jpg

https://img.youtube.com/vi/_vAUQgOalL4/mqdefault.jpg

Размер — 320 × 180. В нашем примере изображение широкоформатное и без черных полос, но это не обещание такого же оформления у любой обложки.

Увеличенное превью: hqdefault.jpg

https://img.youtube.com/vi/_vAUQgOalL4/hqdefault.jpg

Размер — 480 × 360. Обратите внимание на соотношение сторон: оно отличается от широкоформатного варианта.

Стандартное крупное превью: sddefault.jpg

https://img.youtube.com/vi/_vAUQgOalL4/sddefault.jpg

В этом примере размер — 640 × 480. Если максимальное превью недоступно, проверьте этот вариант.

Максимальное превью: maxresdefault.jpg

https://img.youtube.com/vi/_vAUQgOalL4/maxresdefault.jpg

Размер сохраненного изображения — 1280 × 720. С этого варианта удобно начинать, если нужна крупная обложка, но при его отсутствии переходите к меньшим размерам.

Как скачать открытую обложку

Когда изображение открылось отдельно, на компьютере нажмите на него правой кнопкой мыши и выберите «Сохранить изображение как…» или похожий пункт в вашем браузере.

Выберите папку, при необходимости измените имя файла и сохраните. Затем откройте скачанную картинку и проверьте, что получили нужное изображение, а не маленькую заглушку.

На телефоне обычно используется длительное нажатие на картинку и действие сохранения или загрузки. Название пункта зависит от браузера и операционной системы.

Если изображение нужно для вашего сайта, подготовьте подходящий размер и вес файла. Не обязательно загружать крупную обложку в маленькую карточку.

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

Зачем превью нужно на сайте

Обложку можно использовать как визуальную ссылку на ролик или как заглушку вместо встроенного видеоплеера.

Во втором случае принцип такой:

• При открытии страницы посетитель видит изображение и кнопку воспроизведения.
• До нажатия полноценный видеоплеер не загружается.
• После нажатия скрипт заменяет заглушку встроенным плеером.

Такой подход помогает отложить загрузку стороннего плеера до момента, когда он действительно нужен. Но одного изображения поверх уже загруженного iframe недостаточно: сам плеер должен создаваться или подключаться после действия пользователя.

Не путайте это и с обычной ленивой загрузкой: iframe с loading="lazy" может загрузиться при приближении к видимой области, а не только по нажатию.

Конкретный эффект проверяйте на своей странице. Если на ней один ролик, результат будет отличаться от страницы с несколькими видеовставками. Получение превью само по себе сайт не ускоряет — важно, как организована загрузка плеера.

Частые вопросы

← Предыдущая статьяВыбор и интеграция шрифтов Google Fonts (гугл фонтс)

Следующая статья →Где находится корневая папка сайта и как узнать полный путь