Вам потрібно отримати прев’ю (thumbnail) з відео YouTube? Для цього не потрібні сторонні сервіси чи програми — достатньо браузера.

У статті розглянемо:

• як швидко отримати зображення у браузері, маючи ID відео;

• як автоматично діставати ID з будь-якого YouTube-URL (JS і PHP);

• як отримувати зображення без API-ключів (прямі посилання);

• як отримувати зображення через YouTube Data API v3 (із ключем).

Як отримати ID відео на YouTube?

Щоб отримати прев’ю зображення, спершу нам потрібно знайти ID нашого відео. 

ID — це 11 символів у посиланні на відео. 

Декілька типових варіантів:

• https://www.youtube.com/watch?v=ID_VIDEO

• https://youtu.be/ID_VIDEO

• https://www.youtube.com/embed/ID_VIDEO

• https://www.youtube.com/v/ID_VIDEO

• https://www.youtube.com/shorts/ID_VIDEO

Приклад посилань з ID = dQw4w9WgXcQ 

• https://www.youtube.com/watch?v=dQw4w9WgXcQ → ID після v=

• https://youtu.be/dQw4w9WgXcQ → ID у шляху

• https://www.youtube.com/embed/dQw4w9WgXcQ → ID після embed/

• https://www.youtube.com/v/dQw4w9WgXcQ → ID після v/

• https://www.youtube.com/shorts/dQw4w9WgXcQ → ID після shorts/

Як отримати зображення, маючи ID

Після того, як ви знайши ID - можна легко отримати прев’ю з відео. Підставляєте ваш ID у потрібний шаблон, відкриваєте це посилання (URL) в браузері і збережіть, як звичайну картинку.

Відкрийте в браузері один із шаблонів (замінивши ID на ваш):

• Розмір зображення 1280×720 (якщо доступний)
  https://img.youtube.com/vi/ID/maxresdefault.jpg
• Розмір зображення 480×360
  https://img.youtube.com/vi/ID/hqdefault.jpg
• Розмір зображення 320×180
  https://img.youtube.com/vi/ID/mqdefault.jpg
• Розмір зображення 120×90
  https://img.youtube.com/vi/ID/default.jpg
• Отримати окремий кадр
  https://img.youtube.com/vi/ID/0.jpg
https://img.youtube.com/vi/ID/1.jpg
https://img.youtube.com/vi/ID/2.jpg
https://img.youtube.com/vi/ID/3.jpg

Наприклад:
https://img.youtube.com/vi/dQw4w9WgXcQ/maxresdefault.jpg

Використання на сайті

Далі розглянемо, як можна отримати прев’ю програмно за допомогою JavaScript та PHP коду та викоритсати на своєму сайті

1. Функція для отримання ID з довільного YouTube-URL

Повертає 11-символьний ID або null. Підтримує watch?v=, youtu.be, embed/, v/, shorts/, youtube-nocookie, m.youtube.

Код на JavaScript

// Функція для отримання ID з довільного YouTube-URL
function extractYoutubeId(input) {
  if (typeof input !== 'string') return null;

  const trimmed = input.trim();

  // якщо вже передали сам ID
  if (/^[A-Za-z0-9_-]{11}$/.test(trimmed)) return trimmed;

  // спроба розбору як URL
  try {
    const u = new URL(trimmed);

    // youtu.be/
    if (u.hostname.includes('youtu.be')) {
      const seg = u.pathname.split('/').filter(Boolean)[0];
      if (seg && /^[A-Za-z0-9_-]{11}$/.test(seg)) return seg;
    }

    // youtube.com або m.youtube.com або youtube-nocookie.com
    if (/(^|\.)youtube(?:-nocookie)?\.com$/.test(u.hostname) || u.hostname.includes('m.youtube.com')) {
      // watch?v=
      const v = u.searchParams.get('v');
      if (v && /^[A-Za-z0-9_-]{11}$/.test(v)) return v;

      // /embed/, /v/, /shorts/
      const parts = u.pathname.split('/').filter(Boolean);
      for (let i = 0; i < parts.length - 1; i++) {
        if (['embed', 'v', 'shorts'].includes(parts[i])) {
          const cand = parts[i + 1];
          if (cand && /^[A-Za-z0-9_-]{11}$/.test(cand)) return cand;
        }
      }
    }
  } catch (e) {
    // не URL — пробуємо витягнути схожий на ID фрагмент
  }

  const m = trimmed.match(/(?:youtu\.be\/|youtube(?:-nocookie)?\.com\/(?:.*[?&]v=|(?:embed|v|shorts)\/))([A-Za-z0-9_-]{11})/);
  return m ? m[1] : null;
}

Код на PHP 

// Функція для отримання ID з довільного YouTube-URL
function extract_youtube_id($input) {
    if (!is_string($input) || $input === '') return null;
    $trimmed = trim($input);

    // якщо вже передали сам ID
    if (preg_match('/^[A-Za-z0-9_-]{11}$/', $trimmed)) return $trimmed;

    // спроба регуляркою
    if (preg_match('/(?:youtu\.be\/|youtube(?:-nocookie)?\.com\/(?:.*[?&]v=|(?:embed|v|shorts)\/))([A-Za-z0-9_-]{11})/', $trimmed, $m)) {
        return $m[1];
    }

    // спроба parse_url + пошук v= у query
    $parts = @parse_url($trimmed);
    if (!empty($parts['query'])) {
        parse_str($parts['query'], $q);
        if (!empty($q['v']) && preg_match('/^[A-Za-z0-9_-]{11}$/', $q['v'])) {
            return $q['v'];
        }
    }
    // спроба витягти з path /embed/, /v/, /shorts/
    if (!empty($parts['path'])) {
        $segments = array_values(array_filter(explode('/', $parts['path'])));
        for ($i = 0; $i < count($segments) - 1; $i++) {
            if (in_array($segments[$i], ['embed','v','shorts'], true)) {
                $cand = $segments[$i + 1];
                if (preg_match('/^[A-Za-z0-9_-]{11}$/', $cand)) return $cand;
            }
        }
    }
    return null;
}

2. Функція для отримання прев’ю (метод без використання API)

Функція повертає масив усих доступних зображень для відео

Код на JavaScript

// Повертає масив можливих URL для зображень
function buildThumbnailUrls(videoId) {
  const order = ['maxresdefault','sddefault','hqdefault','mqdefault','default','0','1','2','3'];
  return order.map(name => `https://img.youtube.com/vi/${videoId}/${name}.jpg`);
}

Код на PHP

// Повертає масив можливих URL для зображень
function yt_best_thumbnail_url($videoId, $prefer = ['maxresdefault','sddefault','hqdefault','mqdefault','default','0','1','2','3']) {
    foreach ($prefer as $name) {
        $url = "https://img.youtube.com/vi/{$videoId}/{$name}.jpg";
        // Швидка перевірка доступності
        $headers = @get_headers($url);
        if ($headers && strpos($headers[0], '200') !== false) {
            return $url;
        }
    }
    return null; // якщо нічого не знайдено
}

3. Функція для отримання прев’ю через YouTube Data API v3 (метод з використанням API)

Данний метод є більш надійним, але для нього потрібно отримати в Google ключ API key.

Отримання Ключа API:

1) Зайдіть у Google Cloud Console і створіть (або оберіть) проєкт.

2) В меню APIs & Services → Library увімкніть YouTube Data API v3.

3) У APIs & Services → Credentials створіть API key

4) Запам'ятайте отриманий API key

Код на JavaScript

// videoId - ID код вашого відео
// apiKey - згенерований ключ API
function ytThumbViaDataAPI(videoId, apiKey) {
  const url = `https://www.googleapis.com/youtube/v3/videos?part=snippet&id=${encodeURIComponent(videoId)}&fields=items(snippet(thumbnails))&key=${encodeURIComponent(apiKey)}`;
  const r = await fetch(url);
  if (!r.ok) throw new Error('YouTube API error');
  const data = await r.json();
  const t = data.items?.[0]?.snippet?.thumbnails;
  if (!t) return null;
  return t.maxres?.url || t.standard?.url || t.high?.url || t.medium?.url || t.default?.url || null;
}

// Приклад:
ytThumbViaDataAPI('dQw4w9WgXcQ', 'YOUR_API_KEY');

Код на PHP

// $videoId - ID код вашого відео
// $apiKey - згенерований ключ API
function yt_thumb_via_data_api($videoId, $apiKey) {
    $url = 'https://www.googleapis.com/youtube/v3/videos'
         . '?part=snippet&id=' . urlencode($videoId)
         . '&fields=items(snippet(thumbnails))'
         . '&key=' . urlencode($apiKey);

    $ch = curl_init($url);
    curl_setopt_array($ch, [
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_TIMEOUT => 10,
        CURLOPT_USERAGENT => 'curl'
    ]);
    $res = curl_exec($ch);
    if ($res === false) return null;

    $data = json_decode($res, true);
    $t = $data['items'][0]['snippet']['thumbnails'] ?? null;
    if (!$t) return null;

    foreach (['maxres','standard','high','medium','default'] as $k) {
        if (!empty($t[$k]['url'])) return $t[$k]['url'];
    }
    return null;
}

// Приклад:
echo yt_thumb_via_data_api('dQw4w9WgXcQ', 'YOUR_API_KEY');

// Приклад:
$img = yt_thumb_via_data_api('dQw4w9WgXcQ', 'YOUR_API_KEY');
echo '<img src="'.$img.'">';

Ще декілька слів

• Shorts відео теж мають прев’ю — логіка ідентична, головне отримати ID
• Не всі відео мають прев’ю розміру "maxresdefault". В таких випадках запит на maxresdefault.jpg буде повертати помилку 404. Варто це врахувати і за необходіності, працювати з іншими розмірами.
• Якщо у вас великий проєкт, дотримуйтесь правил використання бренду YouTube/Google і за потреби зберігайте копії прев’ю у себе (наприклад, на власному сервері чи CDN).

Висновок 

Отримати прев’ю (thumbnail) відео з YouTube можна буквально в кілька кліків — достатньо знати ID відео та підставити його у готові посилання. Для простих задач цього цілком достатньо.

А якщо ви веб-розробник — у статті є готові функції на JavaScript та PHP, які допоможуть автоматизувати отримання ID та вибір найкращого зображення як через прямі посилання, так і через YouTube Data API v3.