카페24 쇼핑몰에 유튜브 영상을 반응형으로 삽입하는 가장 효율적인 방법

모바일에서 유튜브 영상이 깨져 보이나요?

상품 상세 설명이나 게시판 글에 유튜브 영상을 삽입했지만, 모바일에서 영상이 잘리지 않거나 너무 작게 나오는 경우 많습니다. 이는 iframe의 width와 height 속성이 고정되어 있기 때문이며, 해결을 위해서는 반응형 처리가 반드시 필요합니다.

카페24에 유튜브 영상 넣는 방법, 총정리

카페24에서 유튜브 영상을 삽입하고, 반응형으로 구현하는 방법은 다음과 같이 나눌 수 있습니다.

1. 기본 iframe 코드 삽입

유튜브 영상 공유 > 퍼가기 클릭 > 아래와 같은 코드 복사

<iframe width="560" height="315" src="https://www.youtube.com/embed/영상ID" frameborder="0" allowfullscreen></iframe>

2. 자바스크립트로 반응형 처리

페이지에 포함된 JS 파일에 아래 코드를 삽입해 자동으로 화면 크기에 맞게 조정합니다.

상품 상세 페이지용

$(document).ready(function() {
    var youtube_area_w = $('.xans-product-additional #prdDetail').width();
    var w = $('.xans-product-additional #prdDetail iframe').attr('width');
    var h = $('.xans-product-additional #prdDetail iframe').attr('height');
    var w_h_rate = w / h;
    $('.xans-product-additional #prdDetail iframe').css({'width':youtube_area_w,'height':youtube_area_w / w_h_rate});
});

게시판 글보기용

$(document).ready(function(){
    var youtube_area_w = $('.boardView .content').width();
    var w = $('.boardView .content iframe').attr('width');
    var h = $('.boardView .content iframe').attr('height');
    var w_h_rate = w / h;
    $('.boardView .content iframe').css({'width':youtube_area_w,'height':youtube_area_w / w_h_rate});
});

3. 가장 쉬운 CSS 기반 반응형 처리

아래와 같이 div로 감싸고 비율을 고정하면 별도 JS 없이도 반응형이 가능합니다.

<div style="position:relative; width:100%; padding-bottom:56.25%;">
  <iframe src="https://www.youtube.com/embed/영상ID"
          style="position:absolute; width:100%; height:100%; left:0; top:0;"
          frameborder="0" allowfullscreen></iframe>
</div>

4. 콘텐츠 빌더 등 카페24 전용 앱 사용

개발 지식이 없는 운영자도 콘텐츠 빌더 앱을 통해 유튜브 영상 블록을 추가하면 자동 반응형으로 설정됩니다.

위치: 관리자 > 앱스토어 > 콘텐츠 빌더 검색
특징: 드래그 앤 드롭 방식, 반응형 자동 설정
활용: 메인, 상세, 이벤트, 게시판 등 다용도 활용

유튜브 영상 삽입 방법 비교

방법	추천 대상	반응형 지원	장점	주의사항
자바스크립트 방식	개발자, 커스터마이징 필요 시	O	정밀 제어 가능	스크립트 파일 수정 필요
CSS 래퍼 방식	운영자, 디자이너	O	복붙만으로 적용 가능	비율 조정에 유의
콘텐츠 빌더 앱	비개발자	O	UI로 쉽게 추가 가능	일부 기능은 유료
유튜브 링크만 삽입	간단 안내 목적	△	가장 빠른 방법	디자인 제어 어려움

실무 적용 팁

상품 상세설명이나 게시판에 유튜브 영상을 자주 삽입한다면, 미리 반응형 구조를 HTML 템플릿에 포함시켜두면 반복 작업을 줄일 수 있습니다. 개발자가 있다면 자바스크립트로 처리하여 동적 크기 조정도 가능하며, 일반 운영자라면 콘텐츠 빌더를 활용해 시각적으로 삽입하는 것도 좋은 방법입니다. 특히 게시판 글에서 여러 개의 영상이 들어가는 경우, jQuery의 .each() 구문으로 반복 처리하여 일괄 대응하는 것도 추천드립니다.

카페24 유튜브 영상 삽입 및 반응형 설정 방법