Если видео из YouTube открывается на отдельной странице или в модальном окне, то для него можно использовать уже готовый скриншот этого видеохостинга.

Ссылка на видео в YouTube имеет виды:

  • https://youtu.be/K0u_kAWLJOA
  • https://www.youtube.com/watch?v=K0u_kAWLJOA
  • https://www.youtube.com/watch?v=K0u_kAWLJOA&app=desktop&ab_channel=PlayStation&etc=mura_vsykaya

Но везде присутствует VIDEO_ID - K0u_kAWLJOA

Во всех ссылках ниже нужно заменить его на свой.

Ссылки в формате JPG:

Размер Ссылка Описание Пример
120 х 90 https://i.ytimg.com/vi/VIDEO_ID/default.jpg По умолчанию
120 х 90 https://i.ytimg.com/vi/VIDEO_ID/1.jpg Вариант 1
120 х 90 https://i.ytimg.com/vi/VIDEO_ID/2.jpg Вариант 2
120 х 90 https://i.ytimg.com/vi/VIDEO_ID/3.jpg Вариант 3
320 х 180 https://i.ytimg.com/vi/VIDEO_ID/mqdefault.jpg По умолчанию
320 х 180 https://i.ytimg.com/vi/VIDEO_ID/mq1.jpg Вариант 1
320 х 180 https://i.ytimg.com/vi/VIDEO_ID/mq2.jpg Вариант 2
320 х 180 https://i.ytimg.com/vi/VIDEO_ID/mq3.jpg Вариант 3
480 х 360 https://i.ytimg.com/vi/VIDEO_ID/hqdefault.jpg По умолчанию
480 х 360 https://i.ytimg.com/vi/VIDEO_ID/hq1.jpg Вариант 1
480 х 360 https://i.ytimg.com/vi/VIDEO_ID/hq2.jpg Вариант 2
480 х 360 https://i.ytimg.com/vi/VIDEO_ID/hq3.jpg Вариант 3
640 x 480 https://i.ytimg.com/vi/VIDEO_ID/sddefault.jpg По умолчанию
640 x 480 https://i.ytimg.com/vi/VIDEO_ID/sd1.jpg Вариант 1
640 x 480 https://i.ytimg.com/vi/VIDEO_ID/sd2.jpg Вариант 2
640 x 480 https://i.ytimg.com/vi/VIDEO_ID/sd3.jpg Вариант 3
1280 x 720 https://i.ytimg.com/vi/VIDEO_ID/hq720.jpg Если имеется
- https://i.ytimg.com/vi/VIDEO_ID/maxresdefault.jpg Максимальная

Ссылки в формате WEBP:

Размер Ссылка Описание Пример
120 х 90 https://i.ytimg.com/vi_webp/VIDEO_ID/default.webp По умолчанию
120 х 90 https://i.ytimg.com/vi_webp/VIDEO_ID/1.webp Вариант 1
120 х 90 https://i.ytimg.com/vi_webp/VIDEO_ID/2.webp Вариант 2
120 х 90 https://i.ytimg.com/vi_webp/VIDEO_ID/3.webp Вариант 3
320 х 180 https://i.ytimg.com/vi_webp/VIDEO_ID/mqdefault.webp По умолчанию
320 х 180 https://i.ytimg.com/vi_webp/VIDEO_ID/mq1.webp Вариант 1
320 х 180 https://i.ytimg.com/vi_webp/VIDEO_ID/mq2.webp Вариант 2
320 х 180 https://i.ytimg.com/vi_webp/VIDEO_ID/mq3.webp Вариант 3
480 х 360 https://i.ytimg.com/vi_webp/VIDEO_ID/hqdefault.webp По умолчанию
480 х 360 https://i.ytimg.com/vi_webp/VIDEO_ID/hq1.webp Вариант 1
480 х 360 https://i.ytimg.com/vi_webp/VIDEO_ID/hq2.webp Вариант 2
480 х 360 https://i.ytimg.com/vi_webp/VIDEO_ID/hq3.webp Вариант 3
640 x 480 https://i.ytimg.com/vi_webp/VIDEO_ID/sddefault.webp По умолчанию
640 x 480 https://i.ytimg.com/vi_webp/VIDEO_ID/sd1.webp Вариант 1
640 x 480 https://i.ytimg.com/vi_webp/VIDEO_ID/sd2.webp Вариант 2
640 x 480 https://i.ytimg.com/vi_webp/VIDEO_ID/sd3.webp Вариант 3
1280 x 720 https://i.ytimg.com/vi_webp/VIDEO_ID/hq720.webp Если имеется
- https://i.ytimg.com/vi_webp/VIDEO_ID/maxresdefault.webp Максимальная
Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.
Протестировать на смартфоне Открыть QR-код для перехода на эту страницу с телефона

Смотрите также:

Адаптивное видео шириной 100%

Установка на сайт видео в iframe с шириной 100%

3D-куб с фотографиями на CSS

Вращающийся трехмерный куб с фотографиями

SVG рамки для фотографий

Три варианта фильтров на SVG для создания рамок для фотографий

Добавить комментарий:

Ваш комментарий отправлен!
Разделы: