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 222 / 1 Page
    [ ● capcut 현존 최강 무료 동영상 편집기 ]

    ● capcut현존최강무료동영상편집기https://capcut.kr.uptodown.com/windows|이게있는데유료를왜써?https://yo…

    [ ● 실시간 서울 한강 라이브캠 Seoul Hangang 4K Live Cam Korea Webcam w/Lo… ]

    ●실시간 서울 한강 라이브캠 Seoul Hangang 4K Live Cam Korea Webcam w/Lofi 韓国ライブカメラ, 반포대교 노을멍…

    [ ● 실시간 서울 한강 라이브캠 Seoul Hangang 4K Live Cam Korea Webcam w/Lo… ]

    ●실시간 서울 한강 라이브캠 Seoul Hangang 4K Live Cam Korea Webcam w/Lofi 韓国ライブカメラ, 반포대교 노을멍…

    [ ● 유튜브다운로드 간단히 동영상 다운로드 하기 ]

    ●유튜브다운로드 간단히 동영상 다운로드 하기 // downlaod youtubehttps://www.youtube.com/watch?v=6JwJ…

    [ ● 스마트폰 음성인식 인공지능 _빅스비 기능 100% 활용하는 방법 ]

    ●스마트폰 음성인식 인공지능 _빅스비 기능 100% 활용하는 방법- 진화하고 있는 놀라운 빅스비 음성인식기능 100% 활용하는 방법빅스비 호출방…

    [ ● 유튜브 스트림 구글home 루틴 정보 ]

    ● 유튜브 스트림 구글home 루틴 정보저는 안되네요링크 원본 입니다--정보만 저장 합니다 --- Hack to play live YouTube…

    [ ● 동영상분석) 스마트 5 시스템 모든 당구시스템 하나로 통일(integration) 당구의 혁명! ]

    ● 동영상분석)스마트 5 시스템 모든 당구시스템 하나로 통일(integration) 당구의 혁명!24편 컥~당구Point 비밀 밝혀 냈다 Ama…

    [ ●소장 ● 내일은 미스트롯 9회 결승 , 준결승 레전드 미션 내용입니다. ]

    ● ● 내일은 미스트롯 9회 결승 , 준결승 레전드 미션 내용입니다.●내일은 미스트롯 9회 준결승 레전드 미션 내용입니다.●내일은 미스트롯 9회…

    [ ● 10억 집 아들에 물려줬는데 세금 한 푼 안낸다?" + 뛰는 공시가, 나는 보유세 (2개의 기사) ]

    ●10억 집 아들에 물려줬는데 세금 한 푼 안낸다?" + 뛰는 공시가, 나는 보유세 (2개의 기사) ☞https://11q.kr에 등록된 자료 …

    [ HOW TO: Download a blob URL video ]

    ●HOW TO: Download a blob URL video ☞https://11q.kr에 등록된 자료 입니다. ♠ 정보찾아 공유 드리며 출처…

    [ ● 5분안에 아이패드 기초 마스터하기 | 누나IT ] 댓글 1

    ●5분안에 아이패드 기초 마스터하기 | 누나IT아들의 아이패드를 사용하고자 영상 공부 합니다. APPLE 아이패드 에어 2세대 Wi-Fi 64G…

    [ [대선 특집] 삼프로가 묻고 이재명 후보/윤석열 후보가 답하다 ]

    [대선 특집] 삼프로가 묻고 이재명 후보/윤석열 후보가 답하다=====================유튜브 영상으로 댓글을 비교 확인 하세요===…

    [ ●BMW 리모콘키 배터리 교체 방법(Key Battery BMW HOW TO Change) 배터리 정보 ]

    ●BMW 리모콘키 배터리 교체 방법(Key Battery BMW HOW TO Change) 배터리 정보#자동차리모콘키#BMW#비엠더블유BMW 리…

    [ ● 박창근 - 미련 #내일은국민가수 5화 TV CHOSUN 211104 방송 ]

    ●박창근 - 미련#내일은국민가수5화 TV CHOSUN 211104 방송 https://youtu.be/D4QZ4KKAgfI ▶ 부제목내용 ☞ht…

    [ ● Netflix 영화 레드 노티스//액션 추천영화 ]

    ●Netflix영화레드 노티스스트림 파일로 저장 소장 하세요Korea 넷플릭스 코리아구독선수와 사기꾼의 화끈한 대결 레드 노티스. 인터폴이 중범…

    [ ●더크루 영화 "넷플릭스"에서 꼭 봐야 하는 레전드 1위 범죄 액션 [영화리뷰 결말포함] ]

    ●더크루 영화"넷플릭스"에서 꼭 봐야 하는 레전드 1위 범죄 액션 [영화리뷰 결말포함] https://youtu.be/aJiL4GjdCu0 ☞h…

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

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

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

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



    ♥간단_메모글♥


    최근글


    새댓글



    PHP 안에 HTML ☞ 홈페이지 화면갱신 시간은 ♨
    ▶ 2024-03-28 18:37:26

    오늘의 홈 현황


    • 현재 접속자♨ 342 명
    • 오늘 가입자※ 2 명
    • 어제 가입자※ 11 명
    • 주간 가입자※ 27 명
    • 오늘 방문자 2,109 명
    • 어제 방문자 2,255 명
    • 최대 방문자 13,042 명
    • 전체 방문자 4,239,443 명
    • 전체 게시물※ 8,481 개
    • 전체 댓글수※ 24,391 개
    • 전체 회원수 10,842 명

    QR코드


    ☞ 사진기로 촬영하시면 방문링크 됩니다

    알림 0








    최신글↑