유투브영상 삽입및 리스트 썸네일 자동 저장 구성

유투브영상 삽입및 리스트 썸네일 자동 저장 구성

영상

정보 참조
https://gnustudy.com/bbs/board.php?bo_table=skin_board&wr_id=94&sfl=wr_subject||wr_content&stx=유튜브&sop=and

기본소스

https://github.com/sampotts/plyr

유튜브 정보

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

중에

480X360 (hqdefault.jpg)

https://img.youtube.com/vi/0wlXaHmmOVc/hqdefault.jpg
을 썸네일 구성


W:\g5\skin\board\BS4-Basic-Webzine_11q\view.skin.php
추가영역

<!-- 888888888888 -->
 <!--  유튜브 영상 게시물추가및 리스트 썸네일 저장  시작 -->
 <!-- W:\g5\skin\board\BS4-Basic-Webzine_11q\view.skin.php -->
<?php
$video_added = false;

for ($i = 1; $i <= G5_LINK_COUNT; $i++) {
    $link = $view['link'][$i] ?? '';
    if ($link) {
 

        // 유튜브 영상 처리
        if (!$video_added && preg_match('/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^\&\?\/]+)/', $link, $matches)) {
            $yt_id = $matches[1];

            // Plyr iframe
            ?>
            <!-- <div class="plyr__video-embed" style="width:100%; height:100%;" id="player">
              <iframe
                src="https://www.youtube.com/embed/<?php echo $yt_id; ?>?origin=<?php echo $_SERVER['HTTP_HOST']; ?>&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1"
                width="100%"
                height="100%"
                allowfullscreen
                allowtransparency
                allow="autoplay">
              </iframe>
            </div> -->
<div class="plyr__video-embed" style="position:relative; width:100%; padding-top:56.25%;" id="player">
  <iframe
    src="https://www.youtube.com/embed/<?php echo $yt_id; ?>?origin=<?php echo $_SERVER['HTTP_HOST']; ?>&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1"
    style="position:absolute; top:0; left:0; width:100%; height:100%;"
    frameborder="0"
    allowfullscreen
    allowtransparency
    allow="autoplay">
  </iframe>
</div>

            <?php

            // 썸네일 자동 다운로드
            $thumb_url = "https://img.youtube.com/vi/{$yt_id}/hqdefault.jpg";
            $thumb_dir = G5_DATA_PATH . "/youtube_thumbs";
            if (!is_dir($thumb_dir)) mkdir($thumb_dir, 0755, true);
            $thumb_file = $thumb_dir . "/{$yt_id}.jpg";

            if (!file_exists($thumb_file)) {
                file_put_contents($thumb_file, file_get_contents($thumb_url));
            }

            $video_added = true; // 첫 번째 영상만
        }
    }
}
?>

 <!--  유튜브 영상 게시물추가및 리스트 썸네일 저장 끝 -->
<!-- 99999999999 -->

상기는 링크1개 만 유튜브 영상 보임

다음은 링크 모두 유튜브 영상 보이게 구성

 
<!-- 888888888888 -->
<!-- 유튜브 영상 모든 링크 게시물추가 영상보임 및 리스트 썸네일 저장 시작 -->
<!-- W:\g5\skin\board\BS4-Basic-Webzine_11q\view.skin.php -->

<?php
for ($i = 1; $i <= G5_LINK_COUNT; $i++) {
    $link = $view['link'][$i] ?? '';
    if ($link) {

        // 유튜브 영상 처리
        if (preg_match('/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^\&\?\/]+)/', $link, $matches)) {
            $yt_id = $matches[1];
            ?>
            <div class="plyr__video-embed" style="position:relative; width:100%; padding-top:56.25%;" id="player_<?php echo $i; ?>">
                <iframe
                    src="https://www.youtube.com/embed/<?php echo $yt_id; ?>?origin=<?php echo $_SERVER['HTTP_HOST']; ?>&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1"
                    style="position:absolute; top:0; left:0; width:100%; height:100%;"
                    frameborder="0"
                    allowfullscreen
                    allowtransparency
                    allow="autoplay">
                </iframe>
            </div>
            <?php

            // 썸네일 자동 다운로드
            $thumb_url = "https://img.youtube.com/vi/{$yt_id}/hqdefault.jpg";
            $thumb_dir = G5_DATA_PATH . "/youtube_thumbs";
            if (!is_dir($thumb_dir)) mkdir($thumb_dir, 0755, true);
            $thumb_file = $thumb_dir . "/{$yt_id}.jpg";

            if (!file_exists($thumb_file)) {
                file_put_contents($thumb_file, file_get_contents($thumb_url));
            }
        }
    }
}
?>
<!-- 유튜브 영상 모든 링크 게시물추가 영상보임 및 리스트 썸네일 저장 끝 -->
<!-- 99999999999 -->