구글 블로그에 올린 유튜브 영상의 썸네일이 표시되지 않을 때 해결 방법

글의 제목이 너무 길면 한눈에 들어오지 않기 때문에 이렇게 썼는데, 이번 포스트의 더 정확한 제목은 "구글 블로그에 Lazy Loading 방식으로 올린 유튜브 영상의 썸네일이 표시되지 않을 때의 해결 방법"이라고 할 수 있겠다.

이전 포스트

구글 블로그에서 유튜브 영상을 삽입하는 가장 효율적인 방법

구글 블로그에 유튜브 영상을 가장 효율적으로 삽입하는 방법을 알려드립니다. 지연 로딩(Lazy Loading) 기술을 활용해 블로그 로딩 속도를 높이고, 플레이어 디자인을 바꾸는 법과 영상 시작 시간을 설정하는 팁을 담았습니다.

이번 글과 관련된 지난 포스트다.

여기서 지연 로딩^{lazy loading} 방식으로 유튜브 영상을 올리는 방법을 소개했었다.

특정 영상만 썸네일이 뜨지 않는다

지연 로딩 방식으로 영상을 가져올 때 가끔 이렇게 썸네일이 뜨지 않는 영상이 있다.

지난 포스트의 지연 로딩으로 유튜브 영상을 가져오는 코드는 썸네일 URL을 sddefault.jpg에 맞춰서 만들어주고 있었는데, 가져오는 영상의 해상도가 너무 낮을 경우에는 sddefault.jpg 파일이 없을 수도 있다.

그런 때는 sd 대신 hq 등을 넣어서 hqdefault.jpg를 가져오면 썸네일을 정상적으로 가져오는 경우가 있다.

그점을 착안해서 유튜브 영상을 불러오는 코드에 data-thumb라는 속성을 넣도록 해서 사용자가 직접 지정한 해상도의 썸네일(mqdefault, hqdefault, sddefault, maxresdefault)을 쓸 수 있도록 하면 된다.

지연 로딩 유튜브 플레이어의 썸네일 지정 방법

<script type='text/javascript'>
//<![CDATA[
/* Light YouTube Embeds by @labnol */
/* Modified to support data-thumb */

function labnolIframe(div) {
  var iframe = document.createElement("iframe");
  var embedUrl = "https://www.youtube.com/embed/" + div.dataset.id + "?autoplay=1&rel=0&hl=ko";

  var startTime = div.dataset.start;
  if (startTime) {
    embedUrl += "&start=" + startTime;
  }

  iframe.setAttribute("src", embedUrl);
  iframe.setAttribute("frameborder", "0");
  iframe.setAttribute("allowfullscreen", "1");
  iframe.setAttribute(
    "allow",
    "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  );
  div.parentNode.replaceChild(iframe, div);
}

function initYouTubeVideos() {
  var playerElements = document.getElementsByClassName("youtube-player");
  for (var n = 0; n < playerElements.length; n++) {
    var videoId = playerElements[n].dataset.id;
    var startTime = playerElements[n].dataset.start;
    var thumbType = playerElements[n].dataset.thumb || "sd"; // 기본값 sd

    var div = document.createElement("div");
    div.setAttribute("data-id", videoId);

    if (startTime) {
      div.setAttribute("data-start", startTime);
    }

    var thumbNode = document.createElement("img");
    thumbNode.src = "https://i.ytimg.com/vi/" + videoId + "/" + thumbType + "default.jpg";
    thumbNode.setAttribute("alt", "유튜브 동영상 썸네일");

    div.appendChild(thumbNode);

    var playButton = document.createElement("div");
    playButton.setAttribute("class", "play");
    div.appendChild(playButton);

    div.onclick = function () {
      labnolIframe(this);
    };
    playerElements[n].appendChild(div);
  }
}

document.addEventListener("DOMContentLoaded", initYouTubeVideos);

//]]>
</script>

유튜브 관련 코드에서 자바스크립트 구간을 이렇게 수정한다.

data-thumb라는 속성을 넣을 수 있도록, 그리고 그렇게 썸네일을 지정할 수 있도록 코드를 수정했다.

<div class="youtube-player" data-id="유튜브 영상의 ID" data-thumb="hq 혹은 mq"></div>

그리고 유튜브 영상을 삽입하는 코드에 이렇게 data-thumb 속성에 hq를 넣고, 그래도 썸네일이 없다면 mq도 넣어보자.

data-thumb 속성을 넣지 않으면 sd가 기본값으로 사용된다.

이렇게 해서 썸네일이 뜨지 않던 영상에 썸네일을 직접 지정할 수 있게 되었다.

영상 아래에 "썸네일이 뜨지 않지만 클릭하면 영상은 재생됩니다." 같은 멘트는 이제 필요 없게 됐다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.