유튜브 동영상 API 썸네일 이미지 자동 출력 > 기술자료

• 목록
• 게시판 리스트 옵션
  • 검색

유튜브 API를 활용해서 주소만 넣으면 동영상 썸네일 이미지를 게시판 목록에 자동으로 출력하는 방법입니다.
유튜브 이미지를 출력하기 위해서는 우선 동영상 ID 값이 필요합니다.



유튜브에서 동영상 퍼가기를 클릭하면 아래와 같이 주소가 보입니다
https://youtu.be/3iM_06QeZi8
여기서 맨 뒷부분 값이 필요합니다.


유튜브 API 에서는 사이즈별로 다양하게 썸네일 이미지를 기본으로 제공하고 있습니다.

( ↓↓↓ 이미지를 클릭하면 큰 화면으로 볼 수 있습니다 ↓↓↓ )


만일 영상 주소가 아래와 같다면
https://www.youtube.com/watch?v=3iM_06QeZi8

기본 스크린샷 주소 : 
https://i.ytimg.com/vi/3iM_06QeZi8/0.jpg                  (screenshot)
https://img.youtube.com/vi/3iM_06QeZi8/0.jpg

영상 처음,중간,끝(120x90) 썸네일(thumbnail) 주소 : 
https://i.ytimg.com/vi/3iM_06QeZi8/1.jpg                  (thumbnail 1)
https://i.ytimg.com/vi/3iM_06QeZi8/2.jpg                  (thumbnail 2)
https://i.ytimg.com/vi/3iM_06QeZi8/3.jpg                  (thumbnail 3)
https://img.youtube.com/vi/3iM_06QeZi8/1.jpg
https://img.youtube.com/vi/3iM_06QeZi8/2.jpg
https://img.youtube.com/vi/3iM_06QeZi8/3.jpg

기본 120X90
https://i.ytimg.com/vi/3iM_06QeZi8/default.jpg
https://img.youtube.com/vi/3iM_06QeZi8/default.jpg

중품질 320x180
https://i.ytimg.com/vi/3iM_06QeZi8/mqdefault.jpg
https://img.youtube.com/vi/3iM_06QeZi8/mqdefault.jpg

고품질 480x360
https://i.ytimg.com/vi/3iM_06QeZi8/hqdefault.jpg
https://img.youtube.com/vi/3iM_06QeZi8/hqdefault.jpg

중간해상도 640X480
https://i.ytimg.com/vi/3iM_06QeZi8/sddefault.jpg
https://img.youtube.com/vi/3iM_06QeZi8/sddefault.jpg

최대해상도 1280x720, 1920x1080
https://i.ytimg.com/vi/3iM_06QeZi8/maxresdefault.jpg
https://img.youtube.com/vi/3iM_06QeZi8/maxresdefault.jpg

스킨 만들 때 적당한 사이즈로 사용합니다.


1. skin / board / gallery / list.skin.php  상단에  아래 함수 추가

if (!function_exists('extract_youtube_ids')) {
    function extract_youtube_ids($url) {
        // 유튜브 여러 형식 대응 정규식
        $pattern = '%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([a-zA-Z0-9_-]{11})%';
        if (preg_match($pattern, $url, $matches)) {
            return $matches[1];  // 동영상 ID만 반환
        }
        return false;  // 매치 안되면 false 반환
    }
}



2. skin / board / gallery / list.skin.php 내용중

                            if($thumb['src']) {
                                $img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" >';
                            } else {
                                $img_content = '<span class="no_image" style="'.$line_height_style.'">no image</span>';
                            }

아래에 내용을 추가합니다
삽입하고자 하는 유튜브 이미지 크기에 맞게 아래 붉은색 글자를 변경하세요

                            // 유튜브 이미지 가져오기
                            $youtube_url = $list[$i]['wr_link1'];  // 동영상 링크
                            if (preg_match('/youtu.be/', $youtube_url) == true) { 
                                $youtube_url0 = explode('/',$youtube_url);
                                $youtube_id = $youtube_url0[3];
                            if (preg_match('/youtu.be/', $youtube_url) == true) { 
                                $youtube_url0 = explode('/',$youtube_url);
                                $youtube_id = $youtube_url0[3];
                            }
                            
                            $youtube_id = extract_youtube_ids($list[$i]['wr_link1']);
                                
                            if ($youtube_id) {
                                $img_content = "<img src=\"https://img.youtube.com/vi/{$youtube_id}/mqdefault.jpg\" width=\"{$board['bo_gallery_width']}\" height=\"{$board['bo_gallery_height']}\">";
                            }



3. skin / board / gallery / style.css 에 내용 추가

.video-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;  /* 16:9 비율 = (9/16)*100 */
    height: 0;
    overflow: hidden;
    margin: 20px 0;
}

.video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}



4. skin / board / gallery / view.skin.php  본문 적당한 위치에 아래 내용 추가

        <?php
        // 유튜브 링크라면 영상 출력
        if ($view['wr_link1']) {
            // 유튜브 ID 추출 함수
            if (!function_exists('extract_youtube_ids')) {
                function extract_youtube_ids($url) {
                    // 유튜브 여러 형식 대응 정규식
                    $pattern = '%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([a-zA-Z0-9_-]{11})%';
                    if (preg_match($pattern, $url, $matches)) {
                        return $matches[1];  // 동영상 ID만 반환
                    }
                    return false;  // 매치 안되면 false 반환
                }
            }

            $youtube_id = extract_youtube_ids($view['wr_link1']);

            if ($youtube_id) {
                echo '<div class="video-wrap" style="margin:20px 0;text-align:center">';
                echo '<iframe width="100%" height="315" src="https://www.youtube.com/embed/'.$youtube_id.'" frameborder="0" allowfullscreen></iframe>';
                echo '</div>';
            }
        }
        ?>



참고자료
https://gnustudy.com/bbs/board.php?bo_table=skin_board&wr_id=94
https://blog.yesyo.com/entry/유튜브Youtube-이미지썸네일-주소