🎬 WordPress에서 YouTube Shorts를 예쁘게 보여주는 방법 (9:16 비율 삽입)

보통 워드프레스에서는 /youtube 블록이나 자동 임베드를 통해 일반 YouTube 영상을 쉽게 넣을 수 있습니다. 하지만 YouTube Shorts의 경우, 9:16 세로 비율이 제대로 맞지 않고 프레임에 여백이 많이 생기거나 썸네일 미리보기조차 되지 않는 문제가 있죠.

이 문제를 해결하려면 아래처럼 직접 HTML 또는 숏코드(shortcode)를 사용하는 방식이 가장 깔끔합니다.

✅ 방법 1: 직접 HTML로 삽입하기

편집기에서 ‘커스텀 HTML’ 블록을 추가한 뒤, 아래 코드를 붙여넣으세요.

<!-- 유튜브 쇼츠 전용 임베드 (9:16 비율) -->
<div style="aspect-ratio: 9 / 16; max-width: 466px; margin: 2rem auto;">
  <iframe 
    src="https://www.youtube.com/embed/XZ2DFlT2lZ0?playsinline=1&modestbranding=1"
    style="width: 100%; height: 100%; border: none;"
    allowfullscreen
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
  </iframe>
</div>

위 코드에서 XZ2DFlT2lZ0 부분만 본인의 Shorts ID로 바꾸면 됩니다. (URL 중 https://www.youtube.com/embed/ 다음 부분)

✅ 방법 2: functions.php에 숏코드 등록하기

아래 코드를 functions.php에 추가하면 [shorts id="..."] 형식으로 손쉽게 쓸 수 있습니다.

// 유튜브 쇼츠 전용 숏코드
function render_youtube_shorts($atts) {
  $atts = shortcode_atts([
    'id' => '',
  ], $atts);

  if (!$atts['id']) return '';

  return '<div style="aspect-ratio: 9 / 16; max-width: 466px; margin: 2rem auto;">
    <iframe 
      src="https://www.youtube.com/embed/' . esc_attr($atts['id']) . '?playsinline=1&modestbranding=1"
      style="width: 100%; height: 100%; border: none;"
      allowfullscreen
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
    </iframe>
  </div>';
}
add_shortcode('shorts', 'render_youtube_shorts');

이제 본문에서는 아래처럼 간단하게 쓰면 끝!

[shorts id="..."]

📱 반응형도 지원됩니다

이 코드는 모바일 화면에서도 9:16 비율을 유지하면서 깔끔하게 보입니다.

제 블로그에 사용된 예를 살펴보면, 이 포스트에서는 단일 Shorts 뷰어를 정중앙에 배치하여 깔끔한 프레젠테이션을 보여주고 있고,

이 글에서는 한 줄에 3개의 Shorts를 그리드로 배열하여 더 다채로운 구성을 활용했습니다.

<div class="shorts-grid">
  <div class="shorts-item">
    <iframe src="https://www.youtube.com/embed/NbJ3m0Tpsvo?playsinline=1&modestbranding=1" 
      allowfullscreen 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      style="width: 100%; height: 100%; border: none;">
    </iframe>
  </div>
  <div class="shorts-item">
    <iframe src="https://www.youtube.com/embed/MezpyfOh1IE?playsinline=1&modestbranding=1" 
      allowfullscreen 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      style="width: 100%; height: 100%; border: none;">
    </iframe>
  </div>
  <div class="shorts-item">
    <iframe src="https://www.youtube.com/embed/8Cf5X6IU0Zw?playsinline=1&modestbranding=1" 
      allowfullscreen 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      style="width: 100%; height: 100%; border: none;">
    </iframe>
  </div>
  <!-- 더 추가 가능 -->
</div>

<style>
.shorts-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.shorts-grid .shorts-item {
  flex: 0 0 calc(33.33% - 1rem);
  max-width: 300px;
  aspect-ratio: 9 / 16;
}
@media (max-width: 768px) {
  .shorts-grid .shorts-item {
    flex: 0 0 calc(50% - 1rem);
  }
}
@media (max-width: 480px) {
  .shorts-grid .shorts-item {
    flex: 0 0 100%;
  }
}
</style>

썸네일 + 링크형 갤러리, 자동 추출 등을 포함한 더 발전된 구성도 가능합니다. 필요하시면 댓글로 알려주세요!