[ 티스토리 스킨 수정 ] 블로그에 유튜브 동영상 카테고리 리스트 코드

티스토리 블로그 동영상 리스트 만들기

블로그를 운영하면서 글만으로 콘텐츠를 전달하는 데 한계가 느껴질 때가 있습니다. 특히 요즘처럼 다양한 형식의 미디어 소비가 활성화된 시대에서는 글만으로는 독자들에게 충분히 정보를 전달하기 어려운 경우가 많습니다. 이럴 때 유용한 도구가 바로 동영상입니다.

유튜브 채널을 운영 중이거나 동영상 콘텐츠를 제작하는 블로거라면, 자신의 블로그에 동영상을 효과적으로 통합하는 것은 더 이상 선택이 아닌 필수가 되었습니다. 이 글에서는 블로그에 동영상을 공유하고, 블로그 스킨을 수정하여 이를 잘 노출시키는 방법에 대해 다뤄보겠습니다.

블로그에서 동영상의 중요성

기존의 블로그는 글과 이미지 중심으로 운영되는 경우가 많았습니다. 하지만 이제는 동영상 콘텐츠를 결합한 블로그 운영이 필수적인 요소로 자리잡고 있습니다. 특히 유튜브나 Vimeo와 같은 플랫폼에서 동영상을 제작하고 운영하는 블로거가 늘어나면서, 이를 블로그에 통합하는 것이 트렌드로 자리잡았습니다.

동영상은 글보다 직관적이고 빠르게 정보를 전달할 수 있는 장점이 있습니다. 또한, 영상 콘텐츠는 시청각적인 요소가 결합되어 독자의 관심을 끌기 더 용이합니다.

예를 들어, 유튜브 영상 속에 강의나 리뷰, 튜토리얼 등을 담아두면, 방문자는 글로만 설명하는 것보다 영상으로 직접 보는 것이 훨씬 유익하고 이해가 빠를 수 있습니다. 또한, 블로그의 방문자 수가 많아질수록 동영상 콘텐츠는 더욱 중요한 역할을 하게 됩니다.

블로그 스킨 수정

그렇다면 티스토리 블로그에 동영상을 어떻게 통합할 수 있을까요?

우선, 블로그 스킨을 수정하면 됩니다. 기본적인 스킨은 텍스트 기반의 콘텐츠에는 적합하지만, 동영상 콘텐츠를 효과적으로 노출시키기에는 부족할 수 있습니다. 따라서, 블로그의 스킨을 동영상 콘텐츠와 더 잘 어울리도록 수정해야 합니다.

아래는 카테고리 페이지에 자동으로 유튜브 동영상이 자동노출되는 방법입니다.

1. 동영상 전용 영역 선택

블로그 스킨을 수정할 때, 동영상 전용 영역을 만드는 것이 좋습니다. 동영상 전용 영역은 블로그의 메인 콘텐츠 부분과 카테고리 페이지 사이드가 있는 블로그는 최신글과 인기글에 삽입하는 방법입니다.

2. 동영상 플레이어와 연동

블로그 스킨을 수정하는 또 다른 중요한 부분은 동영상 플레이어와의 연동입니다. 유튜브나 Vimeo와 같은 외부 동영상 플랫폼의 동영상을 삽입할 때, 동영상의 크기와 위치를 최적화해야 합니다. 예를 들어, 모바일 화면에서도 깨지지 않고 잘 보일 수 있도록 반응형 디자인을 적용하는 것이 중요합니다.

또한, 블로그 디자인에 맞게 영상 썸네일이나 재생 기능을 설정하여 사용자 편리를 높이는 것이 좋습니다.

3. 동영상 균형 맞추기

블로그는 글과 이미지, 그리고 동영상이 조화를 이루어야 합니다. 따라서 텍스트와 동영상의 균형을 잘 맞추는 것이 중요합니다. 블로그 글을 작성할 때, 동영상의 내용과 관련된 간단한 소개나 요약을 함께 첨부해두면 방문자가 글과 영상을 동시에 이해할 수 있어 좋습니다.

블로그 스킨 수정 방법

1. 유튜브 영상 임베드 코드 삽입

유튜브 영상 임베드 코드를 사용하여 유튜브에 업로드된 동영상을 블로그에 삽입하는 방법은 매우 간단합니다. 이 방법은 유튜브에서 제공하는 기본적인 기능으로, 별도의 복잡한 코드 작업 없이 빠르게 동영상을 블로그에 삽입할 수 있습니다.

유튜브 임베드 코드 삽입 방법

1. 유튜브에서 영상 찾기 먼저, 유튜브에서 삽입할 영상을 찾습니다.
2. '공유' 버튼 클릭 영상 하단에 있는 공유 버튼을 클릭합니다.
3. '임베드' 옵션 선택 '공유' 옵션에서 HTML 코드가 나타납니다.
4. HTML 코드 복사 제공된 주소 HTML 코드를 복사합니다. 

글페이지 중 적당한 위치에 아래 코드에  동영상 주소를 넣어주시면 됩니다.

 

<p class="youtubeurl" data-ke-size="size16" style="user-select: auto !important;">
https://youtu.be/0jC-sW5l4_g?si=SrofVXVTTWtQH2a4</p>

 

 방법을 사용하면 이미지와 동영상이 자연스럽게 삽입되어 방문자는 동영상을 바로 볼수 있습니다 또한, 블로그 디자인에 맞게 동영상의 크기와 위치를 조정할 수 있어, 콘텐츠에 어울리는 최적의 위치를 만들 수 있습니다.

사용 예제

이 사이트를 이동하면 아래 코드를 적용한 결과를 볼수 있습니다.

동영상 리스트 카테고리 페이지

 <s_list>
  <div class="wrap_content">
    <div id="content_search_list" class="content content_article_rep">
      <div class="inner_content">
        <div id="content_search" class="content sub_content">
          <div class="inner_content">
            <div class="section_area">
              <h2 class="tit_section">
                <span class="txt_section"></span>
              </h2>
              <ul class="list_article list_sub list_sub_type1">
                <s_list_rep>
                  <li>
                    <a href="" class="link_thumb">
                      <s_list_rep_thumbnail>
                        <div class="youtube-container" data-url=""></div>
                        <div class="box_thumb thumb_img" style="background-image:url('//i1.daumcdn.net/thumb/C300x200.fwebp.q85/?fname='); display: none;"></div>
                        <div class="box_thumb no_img" style="display:none;"></div>
                      </s_list_rep_thumbnail>
                      <div class="cont_thumb">
                        <p class="txt_thumb"></p>
                        <p class="thumb_info">
                          <span class="date"></span>
                          <span class="name">by </span>
                        </p>
                      </div>
                    </a>
                  </li>
                </s_list_rep>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</s_list>

2. 티스토리 동영상 스크립트 사용

티스토리에서는 아래 코드를 사용하면 유튜브 동영상 을 쉽게, 사용할수 있습니다. 이미지와 동영상을 구분해서 동영상 링크가 있는 경우는 자동으로 카테고리 페이지의 섬네임에 자동 노출이 됩니다. 또한 동영상이 없는 경우는 이미지가 노출됩니다.

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const items = document.querySelectorAll('.youtube-container');
    items.forEach(container => {
      const url = container.dataset.url;
      loadYoutubeUrl(url, container);
    });
  });

  function loadYoutubeUrl(url, container) {
    fetch(url)
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.text();
      })
      .then(data => {
        const parser = new DOMParser();
        const doc = parser.parseFromString(data, 'text/html');
        const youtubeUrlElement = doc.querySelector('p.youtubeurl');
        const youtubeUrl = youtubeUrlElement ? youtubeUrlElement.textContent.trim() : null;

        container.innerHTML = '';

        const youtubeMatch = youtubeUrl ? youtubeUrl.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^&]{11})/) : null;

        if (youtubeMatch) {
          const youtubeId = youtubeMatch[1];
          const youtubeEmbedUrl = `https://www.youtube.com/embed/${youtubeId}`;

          const videoContainer = document.createElement('iframe');
          videoContainer.src = youtubeEmbedUrl;
          videoContainer.frameBorder = "0";
          videoContainer.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
          videoContainer.allowFullscreen = true;
          videoContainer.title = "fpv-openipc"; 

          container.appendChild(videoContainer);
          const thumbnailImage = container.closest('.link_thumb').querySelector('.box_thumb.thumb_img');
          thumbnailImage.style.display = 'none';
        } else {
          const thumbnailImage = container.closest('.link_thumb').querySelector('.box_thumb.thumb_img');
          thumbnailImage.style.display = 'block';
          container.style.display = 'none';
        }
      })
      .catch(error => {
        console.error('Error fetching the page:', error);
      });
  }
</script>

3. CSS로 동영상 디자인

동영상을 블로그에 삽입할 때, CSS 스타일을 추가하면 동영상 플레이어의 크기나 위치를 최적화할 수 있습니다. 특히, 반응형 디자인을 적용하여 모바일에서도 문제없이 동영상이 잘 보이도록 할 수 있습니다.

<style>
  .youtube-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
  }
  .youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

블로그에 동영상을 효과적으로 통합하는 것은 이제 필수가 되었습니다.

특히, 동영상 콘텐츠는 독자의 관심을 끌고, 블로그에 방문한 사람들에게 더 많은 관심를 만들수 있는 강력한 도구입니다. 티스토리 스킨을 수정하고 동영상을 잘 배치함으로써, 방문자들에게 더욱 풍성하고 다채로운 콘텐츠를 제공할 수 있습니다.

동영상과 텍스트가 어우러지는 블로그는 매력적이고, 독자들에게 더 많은 정보를 효과적으로 전달하게 될 것입니다.