온라인쇼핑몰 상세페이지에 유튜브 영상 삽입하는 가장 쉬운 방법 (PC 860px, 모바일 전체화면 대응)
온라인 쇼핑몰을 운영하다 보면 제품 상세페이지에 유튜브 영상을 삽입하고 싶을 때가 많습니다. 영상은 텍스트나 이미지보다 더 강력하게 정보를 전달하고 구매 전환율을 높이는 데 도움을 줍니다.
하지만 막상 유튜브 영상을 삽입하려고 하면 사이즈가 깨지거나, 모바일에서 잘리지 않고 보이게 하는 방법이 헷갈리는 경우가 많습니다.
그래서 오늘은 쿠팡,네이버, 카페24 등 온라인 쇼핑몰 상세페이지에 유튜브 영상을 제대로 삽입하는 가장 쉬운 방법(html 코드)을 알려드리려고 합니다.
PC에서는 가로 860px에 맞게, 모바일에서는 전체화면에 맞게 자동으로 반응형으로 보이는 코드를 사용하니,디자인 깨짐 없이 깔끔하게 영상이 삽입되는 방법을 찾고 계셨다면 이 글이 꼭 도움이 될 거예요.
1. 왜 유튜브 영상을 상세페이지에 삽입해야 할까?
요즘 소비자들은 긴 글보다 영상에 더 익숙합니다. 제품의 사용법, 실제 리뷰, 동작 방식 등을 영상으로 보여주면 신뢰도도 올라가고, 구매로 이어질 확률도 높아집니다.
특히 모바일 사용자가 많은 쇼핑몰에서는 영상의 시각적 효과가 제품 설명 이상의 힘을 발휘합니다.
2. 유튜브 영상을 그냥 복붙하면 안 되는 이유
많은 분들이 유튜브에서 공유 > 퍼가기 > iframe 복사해서 상세페이지에 붙여 넣습니다.
하지만 이렇게 하면 다음과 같은 문제가 생깁니다.
- 모바일에서 영상이 왼쪽에 잘려 보임
- PC와 모바일에서 사이즈가 다르게 깨짐
- 자동 재생이나 반복 재생이 제대로 작동하지 않음
따라서, 반응형 디자인과 네이버, 쿠팡, 카페24 환경에 맞는 최적화된 HTML 코드를 사용하는 것이 중요합니다.
3. PC 860px, 모바일 전체화면에 맞게 유튜브 영상 삽입하는 코드
아래 코드는 HTML만으로 구성되어 있어 온라인쇼핑몰 상세페이지에 그대로 붙여넣으면 됩니다.
스타일태그 없이도 모바일 반응형 지원, 자동 재생, 무한 반복 재생까지 가능합니다.
일반적으로 온라인쇼핑몰 상세페이지에서 사용하는 이미지의 가로 크기는 860px 입니다.
유튜브 영상 삽입 html 코드
- 영상ID 부분을 삽입하려는 유튜브 영상의 ID로 바꿔주세요.
- 예: https://www.youtube.com/watch?v=aaaa1111 → 영상 ID는 aaaa1111입니다.
- 위 코드를 복사해서 카페24,쿠팡,네이버등 온라인 쇼핑몰의 상품 상세페이지 HTML 모드에 붙여넣기만 하면 끝!
4. 코드가 작동하는 원리 간단 정리
- max-width: 860px → PC에서는 가로 최대 860px까지 표시
- width: 100% → 모바일에서는 화면 크기에 맞게 자동 조절
- padding-top: 56.25% → 16:9 비율 유지 (유튜브 기본 비율)
- position: absolute로 iframe을 부모 div에 꽉 채워 배치
- autoplay=1&mute=1 → 자동 재생 (브라우저 정책상 무음 필수)
- loop=1&playlist=영상ID → 반복 재생 기능 활성화
▶ 여기서 잠깐!!
유튜브 쇼츠 영상 삽입시 일반 영상 올리는 방법처럼 하면 오류가 발생합니다.
따라서 유튜브 쇼츠 영상 삽입 방법과 주의 할 점에 대해 알고 싶으시다면 아래 글 참고 하시기 바랍니다.
5. 적용 시 주의할 점(유튜브 영상 자동 재생 및 반복 재생 문제 해결 방법)
- 영상이 자동 재생되지 않을 경우, mute=1이 빠졌는지 확인하세요.
- 반복 재생이 되지 않으면, playlist=영상ID가 빠졌을 수 있습니다.
- 영상ID는 정확히 입력해야 하며 오타가 있으면 영상이 로딩되지 않습니다.
유튜브 영상을 상세페이지에 삽입할 때 자동 재생(AutoPlay) 및 반복 재생(Loop)이 안 되는 경우가 발생할 수 있습니다.
이럴 때 어떻게 하면 되는지 좀 더 상세하게 아래에 설명하도록 하겠습니다.
▶ 자동 재생이 되지 않는 경우 – mute=1 확인
★ 문제 상황
- 유튜브 영상이 자동 재생되지 않고, 클릭해야만 재생됨
- 특정 브라우저(크롬, 사파리 등)에서 자동 재생이 비활성화됨
★ 원인
유튜브는 최근 브라우저 정책 변경으로 인해 소리가 켜진 상태에서는 자동 재생이 차단됩니다.
즉, 자동 재생(AutoPlay)이 정상적으로 작동하려면 무음(Mute) 설정이 필수입니다.
★ 해결 방법
유튜브 영상 URL에 mute=1을 추가해야 합니다.
✔ autoplay=1 → 자동 재생 활성화
✔ mute=1 → 무음 설정 (이 옵션이 없으면 자동 재생이 차단될 가능성이 높음)
예제 코드
▶ 반복 재생이 되지 않는 경우 – playlist=영상ID 확인
★ 문제 상황
- 영상이 끝나면 자동으로 다시 재생되지 않음
- 다른 관련 영상이 자동으로 재생됨
★ 원인
기본적으로 loop=1만 추가하면 영상이 반복되지 않습니다.
유튜브에서 반복 재생(Loop)을 활성화하려면 반드시 playlist=영상ID도 함께 추가해야 합니다.
★ 해결 방법
유튜브 영상 URL에 loop=1&playlist=영상ID를 추가해야 합니다.
✔ loop=1 → 반복 재생 활성화
✔ playlist=영상ID → 반복 재생을 위해 영상 ID를 추가해야 함
예제 코드
</iframe>
▶ 영상이 로딩되지 않는 경우 – 영상ID 정확성 확인
★ 문제 상황
- 영상이 아예 보이지 않음
- 유튜브 로딩 화면에서 멈춤
- 동영상을 재생할 수 없습니다 오류 발생
★ 원인
유튜브 영상 URL에서 영상ID가 올바르게 입력되지 않으면 영상이 표시되지 않습니다.
예를 들어, 유튜브 동영상 링크가 다음과 같다면:
👉 https://www.youtube.com/watch?v=aaaa1111
영상 ID는 aaaa1111 입니다.
하지만 다음과 같은 실수를 할 경우 영상이 나오지 않을 수 있습니다.
❌ https://www.youtube.com/embed/ aaaa1111 ?autoplay=1&loop=1&playlist=wrongID (잘못된 ID)
❌ https://www.youtube.com/embed/ aaaa1111 ?autoplay=1&loop=1&playlist= (ID 없음)
★ 해결 방법
- 유튜브 주소에서 ?v= 뒤에 있는 정확한 영상 ID를 추출하여 삽입
- playlist=영상ID 부분도 같은 ID로 설정
예제 코드 (정확한 영상 ID 사용)
</iframe>
최종 정리
| 문제 | 원인 | 해결 방법 |
| 자동 재생이 안 됨 | mute=1이 빠져 있음 | mute=1을 추가하여 무음 설정 |
| 반복 재생이 안 됨 | playlist=영상ID가 없음 | loop=1&playlist=영상ID를 추가 |
| 영상이 로딩되지 않음 | 영상ID 입력 오류 | 유튜브 주소에서 정확한 ID를 확인 |
네이버, 쿠팡, 카페24 등 온라인 쇼핑몰에서 유튜브 영상을 삽입하는 건 생각보다 간단하지만, 제대로 보이게 하는 건 전략이 필요합니다.
오늘 소개한 방법대로만 따라 하면 PC에서도, 모바일에서도 깔끔하게 영상이 잘 보이고, 구매 전환율도 자연스럽게 높일 수 있습니다.
이 글이 여러분의 쇼핑몰 운영에 작지만 실질적인 도움이 되었기를 바랍니다.
앞으로도 쇼핑몰 팁을 계속 공유할 예정이니 자주 찾아주세요!
'온라인쇼핑몰 MD 세상 > 온라인쇼핑몰 기초' 카테고리의 다른 글
| 온라인 쇼핑몰 종류 총정리! 오픈마켓 vs 폐쇄몰 vs 위탁판매(성공적인 창업을 위한 쇼핑몰 운영 기본 알기) (0) | 2025.03.12 |
|---|
댓글