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

뒤늦게 아주 좋은 것을 발견했다.

구글 블로그에서는 유튜브 영상을 포스트 본문에 삽입할 때, 유튜브 영상을 직접 불러오지 않고 썸네일 이미지만 먼저 보여준 다음, 방문자가 클릭했을 때만 실제 영상을 가져오는 기능이 있다.

이것으로 포스트의 초기 로딩 속도가 아주 많이 개선되면서 블로그의 성능이 좋아질 수 있다.

참고로 이 방법은 모든 구글 블로그에 해당하는 것은 아닐 것 같고, 특정 템플릿을 사용하는 블로그에만 해당할 것 같은데, 나는 Amalia 템플릿을 사용하고 있다.

그리고 Amalia 템플릿을 만든 곳과 같은 곳에서 만들어진 템플릿이라면 아마 지금부터 설명하는 방법으로 유튜브 영상을 효율적으로 삽입할 수 있을 것이다.

구글 블로그에서 유튜브 영상 반응형으로 만드는 방법

구글 블로그에 유튜브 영상을 삽입했지만 플레이어의 크기가 부자연스럽나요? 이 글은 유튜브 플레이어를 모든 화면 크기에 맞춰 반응형으로 만드는 방법을 알려줍니다. 복사와 붙여넣기만 하면 되는 간편한 HTML과 CSS 코드로 깔끔한 블로그를 만들어 보세요.

이전에 유튜브 영상을 삽입할 때 반응형으로 만드는 방법에 대한 글을 올렸었다.

그때 필요한 CSS 코드들을 알려주면서 Amalia 템플릿에는 이미 그 코드가 있어서 따로 추가할 필요가 없다고 했었는데, 사실 그 코드 안에는 CSS 코드뿐만 아니라 자바스크립트 코드도 함께 있었다.

이 자바스크립트 코드들이 오늘 알려줄 기능을 담당하고 있다.

구글 블로그 위젯 유튜브 영상을 다른 영상으로 바꾸는 법

구글 블로그 사이드바나 푸터에 있는 유튜브 영상을 바꾸고 싶으신가요? 이 글은 위젯의 HTML 코드만 간단하게 수정하여 원하는 영상으로 교체하는 방법을 알려드립니다. 초보자도 쉽게 따라 할 수 있는 가이드로 블로그를 업데이트해 보세요.

위젯으로 블로그의 사이드바나 푸터에 삽입된 유튜브 영상을 다른 영상으로 고치는 방법도 소개했었다.

오늘 설명할 내용은 이 포스트에서 알려줬던 내용의 연장선이라고 할 수 있으니, 이 글도 보는 것을 추천한다.

구글 블로그에서 유튜브 영상을 지연 로딩(Lazy Loading)으로 가져오기

클릭하지 마시길.

유튜브 영상이 아니라 캡처한 이미지다.

위에서 첫 번째로 링크했던 지난 포스트에서 알려준 방법(일반적으로 사용하는 iframe 태그로 시작하는 유튜브 동영상 퍼가기 소스 코드로 영상을 가져오는 방법)으로 유튜브 영상을 가져오면 유튜브 플레이어가 이렇게 표시된다.

이 방법으로 영상을 가져오면 포스트가 로딩될 때 유튜브 영상도 함께 가져온다.

그렇게 개별 포스트 페이지가 무거워지고 로딩 시간이 길어질 수 있다.

방문자가 재생을 클릭하지 않을지도 모르는 영상까지 모두 미리 로드되기 때문에 불필요한 데이터가 소모되고, 특히 글 내용의 특성상 유튜브 영상을 여러 개를 삽입해야 하는 경우라면 포스트의 로딩은 더더욱 길어질 것이다.

이것 역시 캡처한 이미지일 뿐이니 낚여서 클릭하지 마시길.

이건 지연 로딩을 통해 유튜브 영상의 썸네일 이미지만 먼저 보여주는 방식의 유튜브 플레이어다.

위에서도 설명했듯 유튜브 영상을 직접 불러오지 않고, 썸네일 이미지만 먼저 보여준 다음 사용자가 클릭했을 때만 실제 영상을 로드하는 지연 로딩^{lazy loading} 기술을 사용한다.

<div class="youtube-player" data-id="유튜브 영상의 ID"></div>

지연 로딩 방식으로 유튜브 영상을 삽입하는 코드는 이렇다.

영상의 ID를 가져오는 방법은 위에 링크한 두 번째 포스트에서 설명을 했었으니 생략하겠다.

유튜브 영상의 플레이 버튼을 변경해 보자

그런데 두 가지 방식의 플레이어를 비교해 보니, 성능 면에서는 두 번째 플레이어가 효율적이지만, 약간 신경 쓰이는 부분이 있다.

바로 영상 썸네일 위에 표시되는 플레이 버튼의 디자인이다.

첫 번째 플레이어는 영상의 제목도 미리 표시되어 있고, 플레이 버튼의 디자인도 누가 봐도 유튜브 영상이라는 느낌을 준다.

하지만 두 번째 플레이어는 영상의 제목도 미리 표시되지 않고, 플레이 버튼의 디자인도 절대 유튜브 영상이라는 느낌이 들지 않는다. 굉장히 수상한 플레이어 같은 모습을 하고 있다.

지연 로딩 방식으로 영상을 썸네일만 가져오면, 영상의 제목을 미리 표시하는 것은 불가능하다.

하지만 재생을 하면 원래의 유튜브 플레이어처럼 영상의 제목도 표시되니 괜찮다.

그런데 플레이 버튼의 디자인 만큼은.. 원래의 유튜브 로고처럼 만들어 보자.

블로그 관리 페이지의 왼쪽 메뉴 '레이아웃'으로 이동 후에 유튜브 플레이어 위젯의 연필 아이콘이 있는 작은 버튼을 클릭한다.

이미지에서 드래그 해놓은 부분을 유튜브 플레이어 버튼의 URL로 교체한다.

이런 글을 보고 따라 할 정도라면 구글에서 이미지 검색으로 유튜브 플레이 버튼의 png 파일 정도는 찾아올 수 있을 테니 설명은 생략하겠다.

.youtube-player .play {
  height: 48px; /* 수정 */
  width: 68px; /* 수정 */
  left: 50%;
  top: 50%;
  margin-left: -34px; /* 수정 */
  margin-top: -24px; /* 수정 */
  position: absolute;
    background: url("유튜브 로고 png 이미지의 URL") no-repeat;
  cursor: pointer;
  background-size: 68px 48px; /* 추가 */
}

그리고 CSS 코드도 이렇게 수정한다.

자세한 설명은 생략한다.

♬ Little Orange - A New Morning Song (2023)

이번에는 캡처 이미지가 아니다.

지연 로딩을 이용한 방식으로 가져온 유튜브 영상이다.

플레이 버튼의 이미지도 성공적으로 변경되었다.

지연 로딩 유튜브 플레이어의 영상 시작 시간 설정 방법

글을 끝내려다가 한 가지 기능을 더 추가했다.

유튜브 사이트를 통해 동영상 퍼가기 소스 코드로 영상을 가져오면 영상의 시작 시간도 설정할 수 있는 걸 다들 알 것이다.

지연 로딩으로 유튜브 영상을 가져올 경우에는 기본적으로 그 기능을 사용할 수가 없다.

그런데 사용할 수 있도록 코드를 수정했다.

<script type='text/javascript'>
//<![CDATA[
/* Light YouTube Embeds by @labnol */
/* Web: https://www.labnol.org/ */

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 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/ID/sddefault.jpg".replace( /* 수정 */
      "ID",
      videoId
    );
    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>

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

<div class="youtube-player" data-id="유튜브 영상의 ID" data-start="시작 시간"></div>

영상의 시작 시간을 설정하고 싶은 영상은 포스트 본문에서 코드를 이렇게 넣으면 된다.

data-start 속성에 90을 넣는다면 영상이 1분 30초부터 시작된다.

그냥 처음부터 재생할 경우에는 data-start 속성을 아예 넣지 않으면 된다.

썸네일 이미지 설정 방법

구글 블로그에서 포스트 썸네일을 선택하는 방법

구글 블로그에서 원하는 이미지를 포스트 썸네일로 설정하는 방법을 알아봅니다. 블로그의 썸네일 시스템을 이해하고, 숨겨진 <img> 태그를 활용해 원하는 썸네일을 지정하는 실용적인 팁과 코드, 그리고 그 이유를 자세히 설명합니다.

포스트에 이미지는 올리지 않고 유튜브 영상만 올리거나, 이미지들보다 유튜브 영상이 더 위에 올라오면 그 유튜브 영상의 썸네일이 포스트의 썸네일이 됐었다.

그런데 유튜브 영상을 지연 로딩으로 올리면 유튜브의 썸네일을 포스트의 썸네일로 사용할 수가 없다.

유튜브의 썸네일을 포스트의 썸네일로 사용하고 싶다면 이 포스트의 내용을 확인하자.

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

구글 블로그에서 지연 로딩 방식으로 삽입한 유튜브 영상의 썸네일이 표시되지 않는 오류를 해결하는 방법을 공개합니다. 자바스크립트 코드를 수정하여 data-thumb 속성을 추가하고, 영상 해상도에 맞는 썸네일(hq, mq 등)을 직접 지정하는 방법을 안내합니다.

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

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