유튜브 동영상 API 썸네일 이미지 자동 출력 - 게시판스킨강좌, 그누보드5강좌

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

유튜브 이미지를 출력하기 위해서는 우선 동영상 ID 값이 필요합니다.

예를 들어 유튜브에서 동영상 퍼가기를 클릭하면 코드가 이런식으로 되어 있는데

https://youtu.be/0wlXaHmmOVc 

여기서 맨 뒷부분 값이 필요합니다.

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

120X90 (default.jpg) 

https://img.youtube.com/vi/0wlXaHmmOVc/default.jpg

320X180 (mqdefault.jpg)

https://img.youtube.com/vi/0wlXaHmmOVc/mqdefault.jpg

480X360 (hqdefault.jpg)

https://img.youtube.com/vi/0wlXaHmmOVc/hqdefault.jpg

640X480 (sddefault.jpg) 

https://img.youtube.com/vi/0wlXaHmmOVc/sddefault.jpg

동영상 최대 해상도 (maxresdefault.jpg)

https://img.youtube.com/vi/0wlXaHmmOVc/maxresdefault.jpg

스킨 만드실 때 적당한 사이즈로 골라서 사용하시면 됩니다.

(빨간색 부분 변경하면 됩니다.)

그누보드 기본 gallery 스킨에 실제 적용을 해보겠습니다.

일단 link 필드나 여분 필드를 활용해서 저 주소값을 입력받아야겠죠.

예제는 여분 필드로 설명하겠습니다.

write.skin.php 파일 수정

wr_1 여분필드를 사용해서 유튜브 동영상 주소값을 입력받습니다.

<tr>

    <th scope="row"><label for="youtube">유튜브주소</label></th>

    <td><input type="text" name="wr_1" value="<?php echo $write['wr_1'] ?>" id="wr_1" class="frm_input" size="50"><p style="margin-top:5px">입력예 : https://youtu.be/0wlXaHmmOVc</p></td>

</tr>

list.skin.php 파일 수정

<?php

if ($list[$i]['is_notice']) { // 공지사항  ?>

    <strong style="width:<?php echo $board['bo_gallery_width'] ?>px;height:<?php echo $board['bo_gallery_height'] ?>px">공지</strong>

<?php } else {

    $thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height']);

    if($thumb['src']) {

        $img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" width="'.$board['bo_gallery_width'].'" height="'.$board['bo_gallery_height'].'">';

    } else {

        $img_content = '<span style="width:'.$board['bo_gallery_width'].'px;height:'.$board['bo_gallery_height'].'px">no image</span>';

    }

    echo $img_content;

}

?>

위 코드를 이렇게 변경합니다. 빨간색 부분이 변경된 부분입니다.

<?php

if ($list[$i]['is_notice']) { // 공지사항  ?>

    <strong style="width:<?php echo $board['bo_gallery_width'] ?>px;height:<?php echo $board['bo_gallery_height'] ?>px">공지</strong>

<?php } else {

    $thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height']);

    if($list[$i]['wr_1']) {

        $youtube_id = str_replace("https://youtu.be/", "", $list[$i]['wr_1']);

        $img_content = '<img src="https://img.youtube.com/vi/'.$youtube_id.'/mqdefault.jpg" width="'.$board['bo_gallery_width'].'" height="'.$board['bo_gallery_height'].'">';

    } else if($thumb['src']) {

        $img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" width="'.$board['bo_gallery_width'].'" height="'.$board['bo_gallery_height'].'">';

    } else {

        $img_content = '<span style="width:'.$board['bo_gallery_width'].'px;height:'.$board['bo_gallery_height'].'px">no image</span>';

    }

    echo $img_content;

}

?>

유튜브 주소값을 입력했으면 유튜브 썸네일을 출력하고

없으면 에디터나 파일 첨부로 등록한 이미지를 출력하라는 내용입니다.

코드를 유심히 보면 처음에 설명해드린 유튜브에서 기본으로 제공하는 형태는 이렇고..

https://img.youtube.com/vi/0wlXaHmmOVc/mqdefault.jpg

예제에 사용된 그누보드 스킨에서는 동영상 ID 값을 이렇게 적용했습니다.

https://img.youtube.com/vi/'.$youtube_id.'/mqdefault.jpg

그리고 $youtube_id 값은 wr_1 여분필드에서 입력받은 값에서 이렇게 추출을 했고요.

$youtube_id = str_replace("https://youtu.be/", "", $list[$i]['wr_1']);

유튜브 동영상 ID 입 출력 방법은 기본적인 방법으로 했으며 더 나은 방법이 있으면 변경하셔도 됩니다.

* 참고사항

view 페이지에서의 동영상 출력은 view.skin.php 파일 적당한 곳에 이렇게 추가

<?php

if($view['wr_1']) {

$youtube_id = str_replace("https://youtu.be/", "", $view['wr_1']);

?>

<iframe width="560" height="315" src="https://www.youtube.com/embed/<?php echo $youtube_id ?>" frameborder="0" allowfullscreen></iframe>

<?php } ?>

실제 해보시면 방법은 매우 간단합니다.