[유튜브] 유튜브 등록된 썸네일 가져오기 (+영상 가져오기)

🟩 Frontend-HTML & CSS & +JS/🔰HTML & CSS & JQ

[유튜브] 유튜브 등록된 썸네일 가져오기 (+영상 가져오기)

ramen2 2024. 9. 18. 17:23

| 문제상황

영상이 재생 되기전, 썸네일 이미지를 보여 주고 싶은데,
따로 서버에 이미지를 올리지 않고 스크립트를 쓰지않고 빠르게

html과 css로만 가져오려면 어떻게 해야할지 고민중인 상황

(원래 모든 영상을 내 자체 서버에 올리려고 했는데 용량이 너무 크고(30분이상의 영상 X 7)
, 서버가 닫히면 영상을 불러올수없는 상황이 발생하는 등의 이유로 사용을 지향하는편)

| 방법

| 전체 코드

<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
</head>

<style>
     * {
          margin: 0;
          padding: 0;
     }


     li {
          list-style: none;
     }


     .video-container {
          position: relative;
          width: 100%;
          height: 100%;
          overflow: hidden;
     }


     /* 연결중 유튭 썸네일 숨/보이기 */
     @keyframes hideIframe {
          0% {
               opacity: 0;
          }

          /* 처음에는 보임 */
          99% {
               opacity: 0;
          }

          100% {
               opacity: 1;
               display: block;
          }
     }

     #youtube-video {
          animation: hideIframe 3s;
     }
</style>


<body>
<!-- css때문에 영상 잘리긴 하지만, 원리를 이러함 -->
<div class="cam_wrap">
<ul class="cam_all cam_one_by_one">
     <!-- 유튜브 URL -->
     <li class="cam">
          <div class="video-container" style="position: relative; ">

               <!-- 썸네일 이미지 -->
               <img src="https://img.youtube.com/vi/Y3gYNhyOQMk/maxresdefault.jpg" alt="YouTube Thumbnail" width="560" height="315"
                    style="position: absolute; z-index:-1; top: 0;left: 0;width: 100%;height: 100%;width: 100%;object-position: center center;object-fit: cover;height: 100%;"
                    id="thumbnail">

               <!-- 유튜브 영상 iframe -->
               <iframe width="560" height="315" id="youtube-video"
                    src="https://www.youtube.com/embed/Y3gYNhyOQMk?autoplay=1&mute=1&playlist=Y3gYNhyOQMk&loop=1"
                    title="YouTube video player" frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen>
               </iframe>

          </div>
     </li>


</ul>
</div>

</body>

</html>

위 처럼 일반적으로 유튜브 영상 불러오는 iframe 위에 썸네일을 불러오는 아래의

해결코드 (이미지 주소)를 넣고

css로 썸네일 객체를 영상 위에두고, n초뒤에 사라지게 하면 된당

| 해결 코드 (썸네일 이미지만 가져오는 법)

 <!-- 썸네일 이미지 -->
               <img src="https://img.youtube.com/vi/Y3gYNhyOQMk/maxresdefault.jpg" alt="YouTube Thumbnail" width="560" height="315"
                    style="position: absolute; z-index:-1; top: 0;left: 0;width: 100%;height: 100%;width: 100%;object-position: center center;object-fit: cover;height: 100%;"
                    id="thumbnail">

사용법은 유튜브 iframe 영상 가져오듯이 url 주소를 아랫 부분에 넣으면 된다 (iframe과 같은 코드기입)

https://img.youtube.com/vi/Y3gYNhyOQMk/maxresdefault.jpg

전에 작업한 지도 api도, 한 마커마다 유튜브 영상이 있고

그 유튜브 영상의 썸네일을 넣을수도 있었는데..

가능하면 사용을 고려해봐야 겠다

(몇몇개는 영상 하나당 여러 썸네일이 필요하기 때문에..
이건 유튜브에서 가져오기 보단.. 지금처럼 내가 이미지 편집해서 넣는게 나을지도 모르겠음)

저작자표시 비영리 변경금지

'🟩 Frontend-HTML & CSS & +JS > 🔰HTML & CSS & JQ' 카테고리의 다른 글

[HTML] Emmet으로 빠르게 끝 숫자증가 증가클래스/내용 넣기 (0)	2024.10.01
[유튜브] 유튜브 ifream 화질 별 파라미터 정리 (144p, 240p, 360p 등등) (4)	2024.09.23
[JS] 클릭,터치 이벤트 동작 안 할때 : (e.preventDefault() 로 중복이벤트 방지 (1)	2024.09.12
[JS+HTML] html안에 script로 공통요소 (div)가져오기 (+JS동작) (1)	2024.09.10
[CSS] IOS (크롬,사파리) 높이 값 못가지는 부분 해결 (line-height : 1 + flex로 정렬) (1)	2024.09.07

현재글[유튜브] 유튜브 등록된 썸네일 가져오기 (+영상 가져오기)

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

기록장