카페24(쇼핑몰) 상품 상세 페이지에 동영상 반응형으로 추가

상세 페이지 동영상 반응형

이제 쇼핑몰에도 이미지를 통해서만 상품을 보여주는 것보다 동영상을 통해 좀 더 정확한 상품을 보여주는 것으로 변화하고 있습니다. 소비자 또한 보정된 이미지 보다 좀 더 정확한 상품에 대한 동영상을 확인하는 것을 더 선호합니다. 많이 이용하시는 카페 24에 동영상을 추가하는 방법을 알려드리겠습니다. 하지만 이 방법은 다른 쇼핑몰에도 사용가능한 방법입니다.

유튜브 활용

유튜브 동영상 공유를 통해 URL 주소를 복사합니다. html 활용을 위해 퍼가기를 사용하지만 이 코드는 반응형으로 작동하지 않습니다. 그렇기 때문에 퍼가기를 사용하지 않고 기본 url 주소를 복사합니다.

임베드 활용

이제 유튜브에서 복사한 url주소를 반응형 코드로 변형해야 합니다. 아래 공식 사이트로 이동하셔서 url 주소를 입력 후 Embed클릭하시면 하단에 반응형으로 변형된 코드가 자동으로 생성됩니다.

embedresponsively.com

위 임베딩 사이트는 유튜브, 비메오, 데일리모션등 다양한 동영상 변환이 가능합니다.

상세페이지 삽입

이제 임베드에서 반응형으로 변형된 코드를 복사하여 상세페이지 원하는 위치에 붙여 넣기 합니다. html 소스 편집을 활용하여 붙여 넣기 하셔야 합니다.

완성 코드

PC 또는 모바일 크기에 맞게 반응형으로 동영상이 노출됩니다.

<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, 
.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='https://www.youtube.com/embed/3pLAwoNoxC8' frameborder='0' allowfullscreen>
</iframe>
</div>

샘플 영상 확인