[cafe24] 상세페이지 내에 동영상 삽입하기

cafe24 쇼핑몰 상세페이지 내 동영상 삽입하기

cafe24 쇼핑몰의 상세페이지를 전체 통이미지가 아닌 html로 작성하여 동영상을 삽입할 수 있습니다.

 

iframe은 뒤쳐진 기술인 듯 최근 활발히 사용되는 태그는 아닙니다만 여전히 동영상 삽입 코드로 iframe이 사용되고 있습니다.

 

 

1. 삽입할 동영상의 url을 준비합니다.

동영상을 업로드하거나, 업로드된 동영상 하단의 '공유'버튼을 클릭하여 url을 추출합니다.

 

2. 상세페이지 이미지를 cafe24 쇼핑몰 관리자의 ftp에 업로드합니다.

cafe24 쇼핑몰 관리자 접속 > ftp (상단 우측메뉴) > 파일 업로더 (좌측메뉴)

폴더는 별도로 생성하거나 사용하고 있는 이미지 폴더에 넣고 해당 경로를 포함한 이미지 URL을 추출합니다.
전체 상세페이지에서 동영상이 삽입될 위치 기준 위 아래로 이미지를 삽입할 수 있도록 이미지를 잘라준 뒤 업로드합니다.

ex) 폴더 경로 web > upload 인 경우
      이미지 url : www.yourdomain.com/web/upload/image/01.jpg  

cafe24 ftp 접속하여 이미지 파일 업로드

 

 

3. 삽입할 동영상의 url 중 변수처리된 키값을 아래 코드의 키값에 넣어줍니다.

 

유튜브 동영상 url 키값

 

 

 

아래 코드 중 ~/embed/키값 부분을 수정합니다. 반복 재생을 위해 키값은 두번 삽입되어있는 부분을 확인하여 수정하세요.

 

<div style="max-width: 860px; width: 100%; margin: 0 auto;">
<img src="http://dbre.co.kr/dbre/ref-01/001.jpg" style="max-width: 100%;"><br><div style="position: relative; max-width: 860px; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden;">
<iframe src='https://www.youtube.com/embed/o6RQQbEn5mY?&amp;rel=0&amp;controls=0&amp;showinfo=0&amp;playlist=o6RQQbEn5mY&amp;loop=1&amp;autoplay=1&amp;mute=1;' frameborder='0' allowfullscreen style="position: absolute; left: 0; top: 0; width: 100%; height: 100%;">
</iframe>
</div>
<img src="http://dbre.co.kr/dbre/ref-01/002.jpg" style="max-width: 100%;"><div>

❗️cafe24 쇼핑몰의 상세페이지 html 에디터는 코드 작성 시 불필요한 띄어쓰기나 줄바꿈(enter)을 넣어 작성할 경우 브라우저에서 보여지는 페이지에 여백이 삽입될 수 있으므로, 코드 작성시에는 확인 후 코드를 붙여서 작성하시는 것이 좋습니다.

 

youtube iframe 소스를 활용한 내용이며, 상하단 프레임을 최소화 및 자동재생 변수가 처리되어 있습니다.

유튜브 공유하기 소스 옵션에서 더 다양한 변수를 활용할 수 있습니다.
공유하기 소스 옵션은 구글에 'YouTube 내장 플레이어 및 플레이어 매개변수'를 검색하여 다양한 변수 옵션을 수정해보세요.

유튜브 내장 플레이어 매개변수

 

 

 

4. 쇼핑몰 관리 > 상품관리 내 상세설명 모드는 '직접작성' 탭을 선택하고 우측 상단의 ... 버튼을 클릭하여  html 모드로 변경한 뒤 코드를 삽입합니다.

모바일 버전에도 동일한 소스를 넣으면 반응형으로 노출됩니다. (모바일 버전의 상세페이지 사용하지 않는 경우 무관)

 

 

 결과 보기 

See the Pen cafe24 product detail video by leejinam (@leejinam) on CodePen.

 

 

도움이 되셨다면 댓글로 응원해주세요. 😄