그누보드 게시판 유튜브 영상 썸네일 자동 추출 및 출력 가이드

• 목록
• 스크랩

그누보드 게시판 유튜브 영상 썸네일 자동 추출 및 출력 가이드

그누보드 게시판에 입력한 유튜브 주소에서 고유 ID를 추출하여 목록 썸네일과 상세 보기 반응형 영상을 구현하는 방법을 확인합니다.

유튜브 URL 11자리 ID 추출 함수

그누보드 게시판에서 유튜브 주소를 입력했을 때 썸네일과 반응형 동영상을 출력하려면, 다양한 형식의 유튜브 주소에서 11자리 고유 ID를 안정적으로 가져오는 정규식 함수 extract_youtube_ids가 필요합니다.

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];
        }
        return false;
    }
}

게시판 목록 파일에서 유튜브 썸네일 코드 추가하기

그누보드 게시판 목록에서 유튜브 링크(wr_link1)를 이용해 썸네일 이미지를 출력하려면 목록 파일 내 기존 썸네일 조건문 아래에 유튜브 썸네일 주소를 조합하는 코드를 추가해야 합니다.

적용 코드

목록 파일에서 아래 코드를 배치하여 유튜브 고유 ID를 추출하고 썸네일 이미지 태그를 생성합니다.

$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']}\">";
}

주의 사항

• 코드를 수정하기 전 원본 파일을 반드시 백업하시기 바랍니다.
• 파일 상단 또는 공통 포함 파일에 유튜브 ID를 추출하는 extract_youtube_ids 함수가 정의되어 있어야 정상적으로 동작합니다.

그누보드 상세 보기 유튜브 반응형 출력 방법

상세 보기 페이지에서 모바일과 PC 화면에 맞춰 유튜브 동영상을 반응형으로 출력하려면 스타일시트 파일에 반응형 CSS를 추가하고, 상세 보기 파일 본문 출력 위치 주변에 iframe 동영상을 출력하는 코드를 삽입해야 합니다.

1. 스타일시트(CSS) 추가

스타일시트 파일에 비율이 유지되도록 .video-wrap 클래스와 내부 iframe 설정을 추가합니다.

.video-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: 20px 0;
}
.video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

2. 상세 보기 파일 코드 삽입

상세 보기 파일 본문 출력 위치 주변에 유튜브 링크($view['wr_link1'])가 존재할 경우 iframe 동영상을 출력하는 코드를 삽입합니다.

<?php
if ($view['wr_link1']) {
    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];
            }
            return 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>';
    }
}
?>

참고자료

기타 참고자료

• mercury-seed.com — 그누보드 게시판에서 유튜브 영상 썸네일 자동 추출 및 출력하기