YouTube 동영상의 썸네일을 최고 해상도부터 불러오는 방법

YouTube에서 제공하는 썸네일 품질 순서는 다음과 같습니다:

1. maxresdefault.jpg (최고 해상도, 없는 경우 대체 필요)
2. sddefault.jpg (HD 품질, 일부 영상만 제공)
3. hqdefault.jpg (고품질)
4. mqdefault.jpg (중간 품질)
5. default.jpg (최저 품질)

✅ JavaScript 코드: 최고 해상도부터 체크해서 불러오기

YouTube 썸네일을 최고 해상도부터 체크하여 로드하는 JavaScript 코드입니다.

function getBestYouTubeThumbnail(videoId, callback) {
    const resolutions = ["maxresdefault", "sddefault", "hqdefault", "mqdefault", "default"];
    
    function checkImage(index) {
        if (index >= resolutions.length) {
            console.error("No valid YouTube thumbnail found.");
            return;
        }
        
        const img = new Image();
        const url = `https://img.youtube.com/vi/${videoId}/${resolutions[index]}.jpg`;
        
        img.onload = function () {
            if (this.width > 120) { // If the image loads and is valid
                callback(url);
            } else {
                checkImage(index + 1); // Try the next resolution
            }
        };
        
        img.onerror = function () {
            checkImage(index + 1); // Try the next resolution if the image fails to load
        };
        
        img.src = url;
    }
    
    checkImage(0);
}

// 사용 예시
const videoId = "tbFod2qrrkA"; // 여기에 원하는 유튜브 ID 입력
getBestYouTubeThumbnail(videoId, function(url) {
    console.log("Selected Thumbnail URL:", url);
    document.getElementById("thumbnail").src = url; // 이미지 태그에 설정 가능
});

✅ HTML 적용 예시

<img id="thumbnail" src="" alt="YouTube Thumbnail" width="320">

위의 JavaScript 코드를 실행하면, 유효한 가장 높은 해상도의 썸네일을 찾아서 <img> 태그의 src로 설정합니다.

📌 동작 방식

1. maxresdefault.jpg부터 시작해서 썸네일이 존재하는지 확인
2. 존재하지 않으면 다음 해상도로 자동으로 대체
3. 가장 좋은 해상도의 썸네일을 자동으로 선택

이렇게 하면 유효한 고해상도 YouTube 썸네일을 자동으로 가져올 수 있습니다! 🚀

 

PHP로도 YouTube 썸네일을 최고 해상도부터 자동으로 찾고 불러오는 코드를 작성할 수 있습니다.
PHP는 서버에서 동작하므로, get_headers()를 사용하여 존재하는 썸네일을 확인하면 됩니다.

✅ PHP 코드: 최고 해상도부터 체크해서 불러오기

<?php
function getBestYouTubeThumbnail($videoId) {
    $resolutions = ["maxresdefault", "sddefault", "hqdefault", "mqdefault", "default"];
    $baseUrl = "https://img.youtube.com/vi/$videoId/";

    foreach ($resolutions as $res) {
        $url = $baseUrl . $res . ".jpg";
        $headers = @get_headers($url);

        if ($headers && strpos($headers[0], '200') !== false) {
            return $url; // 찾은 경우 해당 썸네일 URL 반환
        }
    }

    return null; // 모든 썸네일이 없을 경우 null 반환
}

// 사용 예시
$videoId = "tbFod2qrrkA"; // 유튜브 비디오 ID 입력
$thumbnailUrl = getBestYouTubeThumbnail($videoId);

if ($thumbnailUrl) {
    echo "<img src='$thumbnailUrl' alt='YouTube Thumbnail' width='320'>";
} else {
    echo "No valid YouTube thumbnail found.";
}
?>

📌 동작 방식

1. maxresdefault.jpg (최고 해상도)부터 시작하여 HTTP 상태 코드 200인지 확인
2. 존재하면 해당 URL을 반환하고 종료
3. 존재하지 않으면 다음 해상도를 자동으로 체크
4. 모든 해상도가 없으면 null 반환

✅ 실행 예시

<?php
$videoId = "tbFod2qrrkA"; 
$thumbnailUrl = getBestYouTubeThumbnail($videoId);

if ($thumbnailUrl) {
    echo "<img src='$thumbnailUrl' alt='YouTube Thumbnail'>";
} else {
    echo "No valid YouTube thumbnail found.";
}
?>

이렇게 하면 자동으로 최고 해상도의 YouTube 썸네일을 가져올 수 있습니다! 🚀

 

YouTube는 특정 동영상의 썸네일이 없을 경우에도 기본 404가 아니라, 존재하지만 빈(저화질) 이미지를 반환합니다. 즉, get_headers()를 사용해도 200 OK 상태를 받기 때문에 이미지가 실제로 유효한지 판별하는 것이 어렵습니다.

✅ 해결 방법

단순히 get_headers()로 200 OK를 확인하는 것만으로는 실제 고해상도 썸네일이 있는지 확인할 수 없습니다.
YouTube의 **"no-thumbnail" 이미지(회색 배경의 기본 이미지)**를 체크하는 방식으로 해결해야 합니다.

🚀 PHP 코드: No-Thumbnail 이미지 방지 (파일 크기 확인)

<?php
function getBestYouTubeThumbnail($videoId) {
    $resolutions = ["maxresdefault", "sddefault", "hqdefault", "mqdefault", "default"];
    $baseUrl = "https://img.youtube.com/vi/$videoId/";

    foreach ($resolutions as $res) {
        $url = $baseUrl . $res . ".jpg";
        $imageSize = @getimagesize($url);

        if ($imageSize && $imageSize[0] > 120) { // No-Thumbnail 이미지는 120px 이하인 경우가 많음
            return $url; // 유효한 이미지 찾으면 반환
        }
    }

    return "https://via.placeholder.com/480x360?text=No+Thumbnail"; // 기본 No-Image 대체
}

// 사용 예시
$videoId = "tbFod2qrrkA"; // 유튜브 동영상 ID 입력
$thumbnailUrl = getBestYouTubeThumbnail($videoId);
echo "<img src='$thumbnailUrl' alt='YouTube Thumbnail' width='320'>";
?>

📌 핵심 로직

1. getimagesize($url)를 사용해 실제 이미지 크기를 가져옵니다.
2. No-Thumbnail 이미지(빈 이미지)는 일반적으로 너비가 120px 이하이므로 이를 체크합니다.
3. 고해상도 썸네일이 없으면 480x360 크기의 "No Image" 대체 썸네일을 출력합니다.

✅ 실행 결과 예시

썸네일이 있는 경우

✔️ "https://img.youtube.com/vi/tbFod2qrrkA/maxresdefault.jpg"

썸네일이 없는 경우

✔️ "https://via.placeholder.com/480x360?text=No+Thumbnail" (기본 이미지 표시)

이제 YouTube에서 빈 이미지를 반환하는 경우에도 No Image 대체 이미지를 표시할 수 있습니다! 🚀

✅ PHP 코드: 반복되는 리스트에서 최적의 썸네일 찾기

리스트 형태로 여러 개의 YouTube 영상 ID를 가지고 있을 경우, 각각의 영상에 대해 최고 해상도 썸네일을 확인한 후 출력하는 방식입니다.

<?php
function getBestYouTubeThumbnail($videoId) {
    $resolutions = ["maxresdefault", "sddefault", "hqdefault", "mqdefault", "default"];
    $baseUrl = "https://img.youtube.com/vi/$videoId/";

    foreach ($resolutions as $res) {
        $url = $baseUrl . $res . ".jpg";
        $imageSize = @getimagesize($url);

        if ($imageSize && $imageSize[0] > 120) { // No-Thumbnail 이미지는 120px 이하
            return $url; // 유효한 썸네일 찾으면 반환
        }
    }

    return "https://via.placeholder.com/480x360?text=No+Thumbnail"; // 기본 No Image
}

// 샘플 YouTube 비디오 ID 리스트
$videos = [
    ["id" => "tbFod2qrrkA", "title" => "Rick Astley - Never Gonna Give You Up"],
    ["id" => "E1Nd06t55tk", "title" => "The Chainsmokers - Closer"],
    ["id" => "nonexistentID123", "title" => "Invalid Video"]
];

// 썸네일 리스트 출력
echo "<ul>";
foreach ($videos as $video) {
    $thumbnailUrl = getBestYouTubeThumbnail($video['id']);
    echo "<li>";
    echo "<img src='$thumbnailUrl' alt='{$video['title']}' width='320'>";
    echo "<p>{$video['title']}</p>";
    echo "</li>";
}
echo "</ul>";
?>

📌 코드 설명

1. getBestYouTubeThumbnail($videoId):
   • maxresdefault.jpg부터 확인하여 존재하는 가장 좋은 해상도의 썸네일을 찾습니다.
   • 기본 No-Thumbnail 방지를 위해 getimagesize()를 사용하여 이미지 크기 확인
   • 썸네일이 없으면 "https://via.placeholder.com/480x360?text=No+Thumbnail"을 반환
2. foreach를 사용하여 여러 개의 YouTube 동영상 썸네일을 리스트로 출력
   • $videos 배열에 여러 개의 YouTube 비디오 ID와 제목 저장
   • 각 동영상 ID에 대해 최적의 썸네일을 찾아 <img> 태그로 출력

✅ 실행 결과 예시

<ul>
    <li>
        <img src="https://img.youtube.com/vi/tbFod2qrrkA/maxresdefault.jpg" alt="Rick Astley - Never Gonna Give You Up" width="320">
        <p>Rick Astley - Never Gonna Give You Up</p>
    </li>
    <li>
        <img src="https://img.youtube.com/vi/E1Nd06t55tk/maxresdefault.jpg" alt="The Chainsmokers - Closer" width="320">
        <p>The Chainsmokers - Closer</p>
    </li>
    <li>
        <img src="https://via.placeholder.com/480x360?text=No+Thumbnail" alt="Invalid Video" width="320">
        <p>Invalid Video</p>
    </li>
</ul>

이제 리스트에서 반복되는 YouTube 썸네일을 최적의 해상도로 자동으로 불러올 수 있습니다! 🚀

✅ PHP & HTML 올바른 코드 (반복문 내에서 YouTube 썸네일 출력)

<?php
function getBestYouTubeThumbnail($videoId) {
    $resolutions = ["maxresdefault", "sddefault", "hqdefault", "mqdefault", "default"];
    $baseUrl = "https://img.youtube.com/vi/$videoId/";

    foreach ($resolutions as $res) {
        $url = $baseUrl . $res . ".jpg";
        $imageSize = @getimagesize($url);

        if ($imageSize && $imageSize[0] > 120) { // No-Thumbnail 이미지는 120px 이하
            return $url; // 유효한 썸네일 찾으면 반환
        }
    }

    return "https://via.placeholder.com/480x360?text=No+Thumbnail"; // 기본 No Image
}

// 샘플 YouTube 비디오 ID 리스트
$videos = [
    ["id" => "tbFod2qrrkA", "title" => "Rick Astley - Never Gonna Give You Up"],
    ["id" => "E1Nd06t55tk", "title" => "The Chainsmokers - Closer"],
    ["id" => "nonexistentID123", "title" => "Invalid Video"]
];
?>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube 썸네일 리스트</title>
</head>
<body>
    <ul>
        <?php foreach ($videos as $video): ?>
            <?php $thumbnailUrl = getBestYouTubeThumbnail($video['id']); ?>
            <li>
                <img src="<?= $thumbnailUrl ?>" alt="<?= htmlspecialchars($video['title']) ?>" width="320">
                <p><?= htmlspecialchars($video['title']) ?></p>
            </li>
        <?php endforeach; ?>
    </ul>
</body>
</html>

📌 이 코드의 특징

✅ PHP와 HTML을 올바르게 섞어서 사용
✅ 반복문(foreach)을 HTML 안에서 활용하여 오류 방지
✅ getBestYouTubeThumbnail($videoId)를 반복문 안에서 사용 가능
✅ htmlspecialchars()를 사용하여 보안 강화 (XSS 방지)

이제 오류 없이 YouTube 썸네일을 리스트로 출력할 수 있습니다! 🚀