HomePC.11q.kr 홈페이지는 HomePc 활용을 위한 정보나눔을 11q.kr과 함께 합니다.
   
 
35.Youtube


펌자료)유튜브 동영상 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 에 등록 된 자료 입니다♠.

    [ 추가 정보 ... 더보기) ]
    뷰PDF 1,2



    office view

    관련자료

    댓글목록

    profile_image

    11qkr님의 댓글

    11qkr 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 아이피 (192.♡.0.1) 작성일

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




    • 일간 조회수
        • 게시물이 없습니다.
    • 주간 조회수
        • 게시물이 없습니다.
    • 월간 조회수
        • 게시물이 없습니다.


    Total 234 / 1 Page
    [ ● 실내에서 상추키우기 자동급수화분 수경재배기 #아파트에서상추키우기 #집에서상추키우기 #수경재배상추 ]

    ●실내에서 상추키우기 자동급수화분 수경재배기#아파트에서상추키우기 #집에서상추키우기 #수경재배상추 ☞https://11q.kr에 등록된 자료 입니…

    [ ●조심하세요!! 집열쇠 복사 스마트폰으로 5초면 가능합니다! 도어락 쓰신다면 꼭 보세요! ]

    ●조심하세요!! 집열쇠 복사 스마트폰으로 5초면 가능합니다! 도어락 쓰신다면 꼭 보세요! ▶영상을 올리는 이유는 키 복사가 이렇게나 간단하니 보…

    [ 공동 현관 출입 스마트폰 NFC 신용카드 카드키 등록하기 ]

    ●공동 현관 출입 스마트폰 NFC 신용카드 카드키 등록하기 ☞https://11q.kr에 등록된 자료 입니다.

    [ Skip Ads 어플로 YouTube 광고를 건너 뛸 수있는 쉬운 방법 ]

    Skip Ads 어플로 YouTube 광고를 건너 뛸 수있는 쉬운 방법우리는 성가신YouTube 광고를 건너 뛸 수있는 쉬운 방법을 제공합니다.…

    [ 구글 네스트 허브를 활용한 52가지 유용한 한국어 명령어 모음입니다. ] 댓글 1

    구글 네스트 허브를 활용한 52가지 유용한 한국어 명령어 모음입니다. 초등학생 이하 자녀가 있으신 부모분들께 적극 추천드립니다. 제품의 특징은 …

    [ 화면 달린 AI스피커 '구글 네스트 허브' 사용기 ]

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

    [ addthis에서 공유버튼 만들기 ]

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

    [ 바비온 면도기 면도날 분리&재조립 방법 ]

    가성비좋은바비온 면도기 면도날 분리&재조립 방법■ ▶ ☞ 정보찾아 공유 드리며 출처는 링크 참조 바랍니다 ♠ . ☞ 본자료는 https:…

    [ 스킨보드 리스트 웹진 위젯 설치및 설정 그리고 대표이미지 유튜브 동영상 썸네일 생성 가져오기하기 ]

    스킨보드 리스트 웹진 위젯 설치및 설정 그리고 대표이미지 유튜브 동영상 썸네일 생성 가져오기하기웹진 스킨보드 리스트 추가 위치에 나리야빌드에서 …

    [ 펌자료)유튜브 동영상 API 썸네일 이미지 자동 출력 ] 댓글 1

    ■펌자료)유튜브 동영상 API 썸네일 이미지 자동 출력유튜브 API를 활용해서 주소만 넣으면 동영상 썸네일 이미지를 게시판 목록에 자동으로 출력…

    [ 월세 받아도 건강보험료 피부양자 유지되는 요건, 최신판 정리! ]

    직장 가입자에서 정년퇴직 은퇴후 아들자녀에게 피부양자 자격 요건지역가입자 전환시 과세 폭탄주택 임대소득에 대한 과세 정보임대주택 사업자 등록…

    [ 크롬캐스트에서 티빙으로 지상파 실시간 방송보기 ::: 티빙/웨이브/왓챠/SPOTV ::: ]

    아이티보이 IT boy구독자 6.7천명구독국내 OTT 서비스 중 하나인 티빙 TVING 은,미박스, 미스틱, 쉴드TV,그리고 구글의 크롬캐스트 …

    [ [포토샵] 사진이미지에서 원하는 부분만 잘라내서 사용하는 방법 ]

    [포토샵] 사진이미지에서 원하는 부분만 잘라내서 사용하는 방법사진을 둥글게 모서리를 만들기http://11q.kr/g5s/bbs/board.ph…

    [ BMW 중립주차 하는 방법 영상 ]

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

    [ 목디스크 완치훈련 ]

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

    [ REVIEW: SofaBaton U1 - Smart Universal Remote Control w. App… ]

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

    [ 파이썬 무료 강의 (기본편) - 6시간 뒤면 여러분도 개발자가 될 수 있어요 [나도코딩] ]

    파이썬 무료 강의 (기본편) - 6시간 뒤면 여러분도 개발자가 될 수 있어요 [나도코딩]■ ▶ ☞ 정보찾아 공유 드리며 출처는 링크 참조 바랍니…

    [ Xbox One X Hard Drive Replacement-How To/ 하드디스크 용량 업그래이드 ]

    Xbox One X Hard Drive Replacement-How To/ 하드디스크 용량 업그래이드■ ▶ ☞ ♠ 정보찾아 공유 드리며 출처는 …

    [ 당구분석)코너각 ]

    https://youtu.be/ohZ_R_UIl18◎ ■ ▶ ☞ ♠ 정보찾아 공유 드리며 출처는 링크 참조 바랍니다. https://11q.kr…

    [ MBC다큐프라임 “사물인터넷” ]

    ◎ ■ ▶ ☞ ♠ 정보찾아 공유 드리며 출처는 링크 참조 바랍니다. https://11q.kr ♠



    W:\www\skin\board\11q_kr_pdf_office_cmt_file_calender_list_skin_board_V41★\list.skin.php


    ☆공지글(Notice)(5)


    PHP 안에 HTML ☞ 방문 시간은 2021-10-16 23:22:00.

    ☆최근글


    ☆새댓글


    State


    • 현재 접속자 76 명
    • 오늘 가입자※ 2 명
    • 어제 가입자※ 4 명
    • 주간 가입자※ 17 명
    • 오늘 방문자 1,436 명
    • 어제 방문자 1,506 명
    • 최대 방문자 8,153 명
    • 전체 방문자 2,842,763 명
    • 전체 게시물※ 6,516 개
    • 전체 댓글수※ 19,705 개
    • 전체 회원수 8,146 명

    MB-Rank


    ☞ Your IP : 3.238.204.31


    ☞ Your Mac : entries

    ☞ theme_name,서버 가동시간
    /volume1/web/www/theme/11q.kr_NB-Basic/layout/side/side-basic/side.php:317: string(71) " 23:22:00 up 13 days, 49 min, 0 users, load average: 4.22, 4.06, 4.20"

    ♨설치버전▶그누보드5_(5.4.5.5),
    ▶나리야_(나리야빌더 1.2.3)