July 22, 2025

유튜브 임베드, 그 답 없는 크기 문제: Jekyll에서 동적 조절하기

블로그에 유튜브 영상을 삽입하는 것은 흔한 일이다. 하지만 Jekyll 환경에서 _includes 파일을 통해 임베드할 때, 영상 크기가 고정되어 불편함을 겪는 경우가 빈번하다. 어떤 영상은 가로형이고, 어떤 영상은 세로형인데, 늘 똑같은 크기로 박아 넣는다는 것은 비효율적이다.

현재 사용되는 youtubePlayer.html 파일은 대략 이런 구조일 것이다.

<div class="">
  <iframe width="315" height="560" src="https://www.youtube.com/embed/" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen> </iframe>
</div>

그리고 마크다운 파일에서는 단순히 이렇게 호출한다:

<!-- <div class="">
  <iframe width="315" height="560" src="https://www.youtube.com/embed/TwVIS6dPnqk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
  gyroscope; picture-in-picture;
  web-share"
  allowfullscreen> </iframe></div> -->


  <div class="">
    <iframe 
      width="315" 
      height="560" 
      src="https://www.youtube.com/embed/TwVIS6dPnqk" 
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen>
    </iframe>
  </div>
  

이 방식의 문제는 명확하다. 모든 영상이 width="315" height="560" 이 고정된 크기로 출력된다는 점이다. 이는 모바일 환경에서의 가독성을 떨어뜨리거나, 영상의 원본 비율을 무시하여 어색하게 보이게 만들지 않겠는가. 결국 콘텐츠에 따라 영상 크기를 다르게 지정해야 한다는 결론에 도달한다.

Jekyll의 Liquid 템플릿은 include 태그를 통해 추가 파라미터를 전달할 수 있는 기능을 제공한다. 이를 활용하여 이 문제를 해결할 수 있다. 몇 가지 실용적인 방법을 제시한다.

방법 1: `width`와 `height` 파라미터 직접 전달

가장 직관적인 방법은 임베드 시점에 width와 height 값을 직접 명시하는 것이다. youtubePlayer.html 파일에 Liquid의 default 필터를 사용하여 기본값을 설정해두면, 파라미터가 지정되지 않았을 때도 문제가 발생하지 않는다.

_includes/youtubePlayer.html 수정:

<div class="">
  <iframe
    width="315"   {# width 파라미터가 없으면 315 사용 #}
    height="560" {# height 파라미터가 없으면 560 사용 #}
    src="https://www.youtube.com/embed/"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen>
  </iframe>
</div>

사용법 (마크다운 파일):

<!-- <div class="">
  <iframe width="315" height="560" src="https://www.youtube.com/embed/TwVIS6dPnqk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
  gyroscope; picture-in-picture;
  web-share"
  allowfullscreen> </iframe></div> -->


  <div class="">
    <iframe 
      width="560" 
      height="315" 
      src="https://www.youtube.com/embed/TwVIS6dPnqk" 
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen>
    </iframe>
  </div>
   {# 가로형 영상 #}

<!-- <div class="">
  <iframe width="315" height="560" src="https://www.youtube.com/embed/kk7idpuBhsE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
  gyroscope; picture-in-picture;
  web-share"
  allowfullscreen> </iframe></div> -->


  <div class="">
    <iframe 
      width="640" 
      height="360" 
      src="https://www.youtube.com/embed/kk7idpuBhsE" 
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen>
    </iframe>
  </div>
   {# 더 큰 가로형 영상 #}

<!-- <div class="">
  <iframe width="315" height="560" src="https://www.youtube.com/embed/GkpJtquicNE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
  gyroscope; picture-in-picture;
  web-share"
  allowfullscreen> </iframe></div> -->


  <div class="">
    <iframe 
      width="315" 
      height="560" 
      src="https://www.youtube.com/embed/GkpJtquicNE" 
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen>
    </iframe>
  </div>
   {# 기본 크기 사용 (세로형) #}

이 방법은 단순하며, 각 영상마다 정확한 크기를 지정해야 할 때 유용하다. 하지만 매번 width, height 값을 입력해야 한다는 점은 다소 번거로울 수 있다.

방법 2: 사이즈 프리셋 사

미리 정의된 몇 가지 크기 프리셋을 사용하면, 보다 효율적으로 영상 크기를 관리할 수 있다. small, medium, large 같은 키워드로 원하는 크기를 지정하는 방식이다. 이는 반복적인 값 입력을 줄여주고, 일관된 디자인을 유지하는 데 도움이 된다.

_includes/youtubePlayer.html 수정:

 {# 'size' 파라미터를 받아, 없으면 'default'로 설정 #}
 {# 기본값: 세로형 영상에 적합 #}
    
    


<div class="">
  <iframe
    width="315"
    height="560"
    src="https://www.youtube.com/embed/"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen>
  </iframe>
</div>

사용법 (마크다운 파일):

<!-- <div class="">
  <iframe width="315" height="560" src="https://www.youtube.com/embed/TwVIS6dPnqk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
  gyroscope; picture-in-picture;
  web-share"
  allowfullscreen> </iframe></div> -->


  <div class="">
    <iframe 
      width="315" 
      height="560" 
      src="https://www.youtube.com/embed/TwVIS6dPnqk" 
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen>
    </iframe>
  </div>
   {# 미리 정의된 'horizontal' 크기 사용 #}

<!-- <div class="">
  <iframe width="315" height="560" src="https://www.youtube.com/embed/kk7idpuBhsE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
  gyroscope; picture-in-picture;
  web-share"
  allowfullscreen> </iframe></div> -->


  <div class="">
    <iframe 
      width="315" 
      height="560" 
      src="https://www.youtube.com/embed/kk7idpuBhsE" 
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen>
    </iframe>
  </div>
   {# 'large' 크기 사용 #}

<!-- <div class="">
  <iframe width="315" height="560" src="https://www.youtube.com/embed/GkpJtquicNE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
  gyroscope; picture-in-picture;
  web-share"
  allowfullscreen> </iframe></div> -->


  <div class="">
    <iframe 
      width="315" 
      height="560" 
      src="https://www.youtube.com/embed/GkpJtquicNE" 
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen>
    </iframe>
  </div>
   {# 'default' 크기 사용 #}

이 방법은 관리 측면에서 가장 효율적이다. 자주 사용하는 크기를 미리 정의해두고 키워드로 호출함으로써, 오류 가능성을 줄이고 일관성을 유지할 수 있다.

방법 3: 반응형 스타일 적용

진정한 의미의 유연성을 원한다면, CSS를 활용한 반응형 디자인을 고려할 수 있다. 이는 기기 화면 크기에 따라 영상 크기가 자동으로 조절되도록 하는 방식이다. padding-bottom 트릭을 사용하여 iframe의 종횡비를 유지하는 것이 핵심이다.

_includes/youtubePlayer.html 수정:

 {# responsive 파라미터 추가 #}
 {# 종횡비 파라미터 추가 #}


  {# responsive=false 일 경우, 기존의 고정 크기 코드 또는 방법 2의 코드 삽입 #}
  <div class="">
    <iframe
      width="315"
      height="560"
      src="https://www.youtube.com/embed/"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen>
    </iframe>
  </div>

CSS (assets/css/style.css 또는 별도 CSS 파일에 추가):

.video-responsive {
  position: relative;
  width: 100%;
  height: 0;
  /* padding-bottom은 Liquid에서 계산하여 인라인으로 삽입됨 */
}
.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

사용법 (마크다운 파일):

<!-- <div class="">
  <iframe width="315" height="560" src="https://www.youtube.com/embed/TwVIS6dPnqk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
  gyroscope; picture-in-picture;
  web-share"
  allowfullscreen> </iframe></div> -->


  <div class="">
    <iframe 
      width="315" 
      height="560" 
      src="https://www.youtube.com/embed/TwVIS6dPnqk" 
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen>
    </iframe>
  </div>
   {# 가로형 반응형 #}

<!-- <div class="">
  <iframe width="315" height="560" src="https://www.youtube.com/embed/GkpJtquicNE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
  gyroscope; picture-in-picture;
  web-share"
  allowfullscreen> </iframe></div> -->


  <div class="">
    <iframe 
      width="315" 
      height="560" 
      src="https://www.youtube.com/embed/GkpJtquicNE" 
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen>
    </iframe>
  </div>
   {# 세로형 반응형 #}

<!-- <div class="">
  <iframe width="315" height="560" src="https://www.youtube.com/embed/kk7idpuBhsE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
  gyroscope; picture-in-picture;
  web-share"
  allowfullscreen> </iframe></div> -->


  <div class="">
    <iframe 
      width="640" 
      height="360" 
      src="https://www.youtube.com/embed/kk7idpuBhsE" 
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen>
    </iframe>
  </div>
   {# 반응형을 원치 않을 경우 기존 방식 사용 #}

이 방법은 가장 기술적으로 진보된 방식이지만, CSS 관리와 종횡비 계산에 대한 이해가 필요하다. 또한, youtubePlayer.html 파일이 다소 복잡해질 수 있다는 단점도 있다. 모든 경우에 반응형이 최적의 해답은 아닐 수 있다는 말이지. 때로는 고정된 크기가 더 적합할 때도 있는 법이다.

결론 및 추천 방법

세 가지 방법 모두 유튜브 임베드 크기를 동적으로 조절할 수 있는 유효한 방안이다. 각 방법의 장단점을 고려했을 때, 나는 **방법 2 (사이즈 프리셋 사용)**를 권장한다.

방법	장점	단점	추천 상황
1. 직접 전달	가장 직관적, 특정 크기 지정 용이	매번 값 입력, 일관성 유지 어려움	아주 가끔 사용하는 경우
2. 사이즈 프리셋	사용 용이, 일관성 유지, 관리 용이	정의된 프리셋 외 크기는 불가, 반응형은 아님	대부분의 경우 (권장)
3. 반응형 스타일	모든 화면에 최적화된 유연성	초기 설정 복잡, CSS 관리 필요	전문적인 웹 디자인 경우

대부분의 블로그 운영자에게는 미리 정의된 프리셋으로 크기를 조절하는 것이 가장 실용적일 것이다. 마크다운 파일에서 size="horizontal" 또는 size="large"와 같이 간결하게 호출함으로써, 영상의 특성에 맞는 최적의 크기를 적용할 수 있기 때문이다.

결국, 이 사소한 크기 조절 하나에도 이렇듯 여러 방안을 고민해야 한다는 사실이 웹 개발의 현실을 보여준다. 단순한 임베드조차 완벽을 추구하자면 끝이 없는 법이다.

유튜브 임베드, 그 답 없는 크기 문제: Jekyll에서 동적 조절하기