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

본문 바로가기
전체검색

게시판스킨강좌

그누보드, 영카트 초보 제작자분들을 위한 다양한 스킨 제작 활용 팁을 공유합니다.

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

관리자 18-01-29 20:34

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

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

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


af1dc5aec58d59115b35237544c3c6cf_1517229460_1426.png 


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 } ?>



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

첨부파일

gallery_youtube.zip (19.6K) 2018-01-29 20:56:51

댓글목록 +1

댓글목록

profile_image

관리자님의 댓글

관리자 작성일

수정된 스킨 첨부했으니 참고하세요.

로그인 후 댓글 작성 가능합니다.
그누스킨닷컴

그누스터디는 그누보드, 영카트를 이용하시는 초보 사용자를 위한 정보를 공유합니다.

E-MAIL : gnustudy@naver.com / 카카오톡 : gnustudy / 텔레그램 : gnustudy
제작 문의를 제외한 일반 문의는 QA 게시판을 이용해주세요.

Copyright © GNUSTUDY. All rights reserved.