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


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

      

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

유튜브 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 } ?>

===================================

설치응용1



<!-- <iframe width="640" height="360" src="https://www.youtube.com/embed/nVCubhQ454c" frameborder="0" allowfullscreen></iframe> -->
<!-- 게시판 목록 시작 { -->

<?
$url=$list[0]['wr_link1'];
         $urls  = explode("?v=",$url);
         $urls2 = explode("&"$urls[1]);
 $img_content = '<img src="http://img.youtube.com/vi/'.$urls2[0].'/0.jpg" alt="" width="'.$board['bo_gallery_width'].'" >';
 echo $img_content;
 ?>



<!-- <iframe id='testID' width="280" height="160" src="https://www.youtube.com/embed/<?=$urls2[0]?>" frameborder="0" allowfullscreen></iframe></center> -->
<iframe id='testID' width="280" height="160" src="https://www.youtube.com/embed/<?=$urls2[0]?>" frameborder="0" allowfullscreen></iframe></center>
<!-- 아래 ok -->
 <!-- <iframe width="280" height="160" src="https://www.youtube.com/embed/<?=$uls2[0]?>" frameborder="0" allowfullscreen></iframe> -->
 <!-- <iframe width="280" height="160" src="https://www.youtube.com/embed/<?=$urls2[0]?>" frameborder="0" allowfullscreen></iframe> -->
<br><br><br><br><br><br>

<script type="text/javascript">
function ChangeSrc(url_yo,w_i,h_i) {
document
var newSrc = "https://www.youtube.com/embed/"+url_yo;
        document.getElementById("testID").src = newSrc;
        document.getElementById("testID").style.width = w_i+'px';
        document.getElementById("testID").style.height = h_i+'px';
    }
</script>

<!-- 출처: https://webdir.tistory.com/472 [WEBDIR] -->
<!-- 소스코드 : <iframe width="640" height="360" src="https://www.youtube.com/embed/nVCubhQ454c" frameborder="0" allowfullscreen></iframe> -->

<!-- 출처: https://webdir.tistory.com/472 [WEBDIR] -->
<!-- https://img.youtube.com/vi/nVCubhQ454c/mqdefault.jpg -->
<!-- 출처: https://webdir.tistory.com/472 [WEBDIR] -->


설치응용2

<?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>';
        $img_content = '<span style="width:'.$board['bo_gallery_width'].'px;height:'.$board['bo_gallery_height'].'px">유튜브 첨부</span>';

    }
    echo $img_content;
  }

?>


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

▶ ☞ 정보찾아 공유 드리며 출처는 링크 참조 바랍니다 ♠ . ☞ 본자료는 https://11q.kr 에 등록 된 자료 입니다♠.

Comments

11qkr 06.06 11:07
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');

// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);


?>
<?
$url=$list[0]['wr_link1'];
$urls = explode("?v=",$url);
$urls2 = explode("&", $urls[1]);
 $img_content = '<img src="http://img.youtube.com/vi/'.$urls2[0].'/0.jpg" alt="" width="'.$board['bo_gallery_width'].'" >';
 echo $img_content;
 ?>



<!-- <iframe id='testID' width="280" height="160" src="https://www.youtube.com/embed/<?=$url[0]?>" frameborder="0" allowfullscreen></iframe></center> -->
<!-- <iframe id='testID' width="280" height="160" src="https://www.youtube.com/embed/<?=$urls2[0]?>" frameborder="0" allowfullscreen></iframe></center> -->
<!-- 아래 ok -->
 <!-- <iframe width="280" height="160" src="https://www.youtube.com/embed/<?=$uls2[0]?>" frameborder="0" allowfullscreen></iframe> -->
 <iframe width="280" height="160" src="https://www.youtube.com/embed/<?=$urls2[0]?>" frameborder="0" allowfullscreen></iframe>
<br><br><br><br><br><br>

<script type="text/javascript">
function ChangeSrc(url_yo,w_i,h_i) {
document
var newSrc = "https://www.youtube.com/embed/"+url_yo;
        document.getElementById("testID").src = newSrc;
        document.getElementById("testID").style.width = w_i+'px';
document.getElementById("testID").style.height = h_i+'px';
    }
</script>

<!-- 출처: https://webdir.tistory.com/472 [WEBDIR] -->
<!-- 소스코드 : <iframe width="640" height="360" src="https://www.youtube.com/embed/nVCubhQ454c" frameborder="0" allowfullscreen></iframe> -->

<!-- 출처: https://webdir.tistory.com/472 [WEBDIR] -->
<!-- https://img.youtube.com/vi/nVCubhQ454c/mqdefault.jpg -->
번호 제목 글쓴이 날짜 조회 추천
성공)단돈 2,119원(139INR)으로 유튜브 프리미엄 이용하기!!(Youtube Premium) 댓글+4 11qkr 06.11 557 0
234 ● 실내에서 상추키우기 자동급수화분 수경재배기 #아파트에서상추키우기 #집에서상추키우기 #수경재배상추 11qkr 08.13 447 0
233 ●조심하세요!! 집열쇠 복사 스마트폰으로 5초면 가능합니다! 도어락 쓰신다면 꼭 보세요! 11qkr 07.15 558 0
232 공동 현관 출입 스마트폰 NFC 신용카드 카드키 등록하기 11qkr 07.15 696 0
231 유튜브등록 영상> KODI SKIN 수정 UP)2021-07-11_kodi19_skin.aeon.nox.si… 11qkr 07.12 542 0
230 Skip Ads 어플로 YouTube 광고를 건너 뛸 수있는 쉬운 방법 11qkr 06.12 397 0
229 성공)단돈 2,119원(139INR)으로 유튜브 프리미엄 이용하기!!(Youtube Premium) 댓글+4 11qkr 06.11 557 0
228 구글 네스트 허브를 활용한 52가지 유용한 한국어 명령어 모음입니다. 댓글+1 11qkr 06.11 488 0
227 화면 달린 AI스피커 '구글 네스트 허브' 사용기 11qkr 06.11 417 0
226 addthis에서 공유버튼 만들기 11qkr 06.10 390 0
225 자바스크립트를 이용하여 카톡 링크 메시지를 전송 댓글+2 11qkr 06.10 538 0
224 바비온 면도기 면도날 분리&재조립 방법 11qkr 06.08 389 0
223 스킨보드 리스트 웹진 위젯 설치및 설정 그리고 대표이미지 유튜브 동영상 썸네일 생성 가져오기하기 11qkr 06.06 450 0
열람중 펌자료)유튜브 동영상 API 썸네일 이미지 자동 출력 댓글+1 11qkr 06.06 556 0
221 월세 받아도 건강보험료 피부양자 유지되는 요건, 최신판 정리! 11qkr 03.23 699 0
220 크롬캐스트에서 티빙으로 지상파 실시간 방송보기 ::: 티빙/웨이브/왓챠/SPOTV ::: 11qkr 03.06 1223 0
219 [포토샵] 사진이미지에서 원하는 부분만 잘라내서 사용하는 방법 11qkr 02.21 796 0
218 BMW 중립주차 하는 방법 영상 11qkr 2020.12.15 941 0
217 목디스크 완치훈련 11qkr 2020.12.03 941 0
216 REVIEW: SofaBaton U1 - Smart Universal Remote Control w. App… 11qkr 2020.11.21 1013 0
215 파이썬 무료 강의 (기본편) - 6시간 뒤면 여러분도 개발자가 될 수 있어요 [나도코딩] 11qkr 2020.05.21 1200 0
214 Xbox One X Hard Drive Replacement-How To/ 하드디스크 용량 업그래이드 shimss@11q.kr 2020.01.22 1307 0
213 신품 PS4 프로 35만원 , 엑원X 30만원 이면 삽니다. 가격이 싸져서 성능대비 가격도 이전기종보다 훨 … shimss@11q.kr 2020.01.18 1310 0
212 당구분석)코너각 shimss@11q.kr 2019.09.06 1649 0
211 당구분석) 당구 1,2,3쿠션에 보너스로 원뱅크까지 치는 초간단 계산법 -아빌247 shimss@11q.kr 2019.09.05 1768 0
210 당구분석)원리를 알면 조금 쉬워지는 당구 횡단샷(feat. 기본배치의 연습방법) -아빌252 shimss@11q.kr 2019.09.05 1843 0
209 당구분석)15를 외우면 끝 | 15 계산법 | 초간편계산법 | 플러스 시스템 | 표은호의 당구강좌 4구 & … shimss@11q.kr 2019.09.05 2347 0
208 당구분석)초급자용 파이브앤하프 시스템 1탄(매뉴얼 및 기초응용) -아빌273 shimss@11q.kr 2019.09.05 2132 0
207 TASKER EDIT // Tasker로 네비 자동실행, 자동종료 설정 영상 shimss@11q.kr 2019.08.11 1780 0
206 MBC다큐프라임 “사물인터넷” shimss@11q.kr 2019.07.21 1810 0
205 SBS 모닝와이드 IOT가 바꾸는 세상 CCTV 홈IOT shimss@11q.kr 2019.07.21 1741 0



PHP 안에 HTML ☞ 방문 시간은 2021-10-16 23:24:17 입니다.
☞ Server uptime /volume1/web/g5s/thema/Basic/side/shimss_basic-side.php:69: string(71) " 23:24:17 up 13 days, 51 min, 0 users, load average: 5.21, 4.45, 4.32"
Category
State
  • 현재 접속자2 77 명
  • 신규 가입자 2 명
  • 오늘 방문자 1,439 명
  • 어제 방문자 1,506 명
  • 최대 방문자 8,153 명
  • 전체 방문자 2,842,766 명
  • 전체 게시물 6,485 개
  • 전체 댓글수 19,683 개
  • 전체 회원수 8,146 명

☞ Your IP : 3.238.204.31

☞ Your Mac : entries

Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand
.\thema\Basic\side\shimss_basic-side.php
+ ☆☆☆ Bookmark link1(S52)_tall.php ☆☆☆