티스토리 썸네일에 유튜브 썸네일 불러오기

개발

티스토리 썸네일에 유튜브 썸네일 불러오기
최종 수정일:

HTML

<a href="[##_article_rep_link_##]" class="indexArticle">
  <div class="index_thumbnail">
      <img src="<s_article_rep_thumbnail>https://i1.daumcdn.net/thumb/R700x0/?fname=[##_article_rep_thumbnail_raw_url_##]</s_article_rep_thumbnail>" class="index_img" alt="[##_article_rep_title_##]" data-href="[##_article_rep_link_##]">
  </div>
  <div class="tit_post">[##_article_rep_title_##]</div>
  <div class="detail">
      <div class="category">[##_article_rep_category_##]</div>
      <div class="cnt-wrap"><img class="heart" src="./images/heart.svg">
          <s_rp_count><span class="cnt">[##_article_rep_rp_cnt_##]</span></s_rp_count>
      </div>
  </div>
  <div class="date hidden">[##_article_rep_date_##]</div>
</a>

임의로 제가 사용했던 인덱스 포스트의 HTML 태그입니다.

다른 건 제쳐놓고, <s_article_rep_thumbnail> 이 들어가는 부분과 data-href는 반드시 위와 같이 수정해주셔야 합니다.
보통 <s_article_rep_thumbnail>은 외부로 빠져있을 건데, img src 안에 전부 구겨 넣어주세요.

<s_article_rep_thumbnail>이 두 번 들어가면 스킨이 깨집니다. 필히 src 안에 한 번만 집어넣으셔야 아무런 오류 없이 사용하실 수 있습니다.

Javascript

function thumbErr(elem, url, callback) {
  fetch(url)
  .then(response => {
    if(response.status === 200) {
      return response.text()
    }
    else {
      return !1
    }
  })
  .then(a => {
    const parser = new DOMParser().parseFromString(a.replace(/src/g, "NOsrc"), "text/html");
    const target = parser.querySelector("iframe[NOsrc*='youtube']");
 
    elem.src = `${target !== null ? `https://i.ytimg.com/vi/${target.getAttribute("NOsrc").replace("https://www.youtube.com/embed/", "")}/original.jpg` : "https://i.imgur.com/I0QZbvs.png"}`,
 
    callback && (
      elem.addEventListener("load", () => {
        callback()
      }, {once: !0})
    )
 
  })
}

위 함수가 썸네일이 없을 때 실행될 함수입니다.
js 파일에 추가하시거나 별도의 js 파일을 만들어 붙여 넣어주세요.

</body> 앞에 script 태그를 만드셔서 집어넣으셔도 됩니다.

응용하면 네이버 TV, 카카오 TV, 사운드 클라우드 등 다양한 썸네일을 가져올 수 있겠지만, 일단 전 유튜브만 작업해뒀습니다.

[...document.querySelectorAll(".index_img")].forEach(a => {
    a.addEventListener("error", () => {thumbErr(a, a.dataset.href)}, {once:true})
})

이미지를 불러오지 못하면 함수가 실행되도록 작업해주시면 끝납니다.
index_img를 본인 스킨의 이미지 class로 변경해주세요.

[...document.querySelectorAll(".index_img")].forEach(a => {
    a.addEventListener("error", () => {thumbErr(a, a.dataset.href, $(".article-wrapper").masonry("layout"))}, {once:true})
})

Masonry 등의 스크립트를 사용하시면, 유튜브 썸네일을 불러왔을 때 레이아웃이 깨질 수 있으므로, callback 함수도 추가할 수 있도록 해뒀습니다.

유튜브 썸네일 로딩이 끝났을 때 callback 함수를 실행합니다. 본인이 사용하는 스킨에 맞게 위 코드처럼 작업하시면 됩니다.

Report an issue