• PRODUCT
  • COUPON
  • DETAIL
  • INFORMATION
  • WITH ITEM
  • REVIEW
  • Q & A
    • 이 상품은 해외배송이 가능한 상품입니다

    [ 23 ENGINE ] 동영상 출력하기, 레이어 띄우기
    메인 대배너를 동영상으로 출력하는 방법을 안내합니다.
    기본적으로 유투브, 비메오를 지원하고 있습니다.
    기본 정보
    [ 23 ENGINE ] 동영상 출력하기, 레이어 띄우기
    메인 대배너를 동영상으로 출력하는 방법을 안내합니다.
    기본적으로 유투브, 비메오를 지원하고 있습니다.
    사용후기 0
    수량 수량증가수량감소
    타임세일

    카드혜택안내 미확인 입금자

    개인결제창을 통한 결제 시 네이버 마일리지 적립 및 사용이 가능합니다.
  • 상품 수량
    수량
    증가 감소
    상품 옵션
    옵션 선택

  • 수량을 선택해주세요.

    옵션선택 박스를 선택하시면 아래에 상품이 추가됩니다.

    최소주문수량 1개 이상 / 최대주문수량 0개 이하입니다.

    상품 목록
    상품명 상품수 가격
    [ 23 ENGINE ] 동영상 출력하기, 레이어 띄우기 수량증가 수량감소 0 (  )
  • TOTAL PRICE 0 (0개)

    할인가가 적용된 최종 결제예정금액은 주문 시 확인할 수 있습니다.

  • PRODUCT
  • COUPON
  • DETAIL
  • INFORMATION
  • WITH ITEM
  • REVIEW
  • Q & A
  • 공급사 바로가기
우선 유투브와 비메오 두가지 방식의 코드를 안내드립니다.
개발에 지식이 있으신분이라면 그대로 사용을 하시고, 그렇지 않다면 아래 안내를 확인하세요.

아래는 기본적인 attribute 설명입니다.

data-id="M7lc1UVf-VE" 비디오 아이디를 지정합니다.
만약 싸이의 강남스타일을 보여주고 싶다면
https://www.youtube.com/watch?v=9bZkp7q19f0
이 주소일텐데요, 여기서 v= 이부분이 영상의 unique code입니다. 9bZkp7q19f0
data-start="false" 자동으로 시작할지 결정합니다.
data-sound="false" 영상의 소리를 켤지 결정합니다.
data-loop="true" 반복적으로 영상을 출력할것인지 결정합니다.
data-width="640" 가로사이즈 지정 / 지정하지 않으면 기본 사이즈로 보여집니다 / 최대 100% 혹은 px
data-height="360" 영상의 높이입니다
data-fixheight="1000" 영상 높이보다 더 강한 강도로 높이를 지정합니다. 센터모드일때 유용합니다.
data-center="true" 영상을 화면보다 크게 설정했다면 좌측으로 기준하는게 아닌 센터를 기준합니다.


1. 유투브

<!--유투브 플레이어-->
<!--@css(/_sp/apps/addon/youtube/youtube.css)-->
<!--@js(/_sp/apps/addon/youtube/youtube.js)-->
<!--영상출력-->
<div youtubeouter><div youtube data-id="M7lc1UVf-VE" data-start="false" data-sound="false" data-loop="true" data-width="640" data-height="360"></div></div>
<!--클릭시 영상출력-->
<a href="#none" youtubeplayer data-id="M7lc1UVf-VE" data-start="true" data-sound="true" data-loop="false">유투브 영상레이어</a>

2. 비메오

<!--비메오 플레이어-->
<!--@css(/_sp/apps/addon/vimeo/vimeo.css)-->
<!--@js(/_sp/apps/addon/vimeo/vimeo.js)-->
<!--영상출력-->
<div vimeoouter><div vimeo data-id="59777392" data-start="false" data-sound="false" data-loop="true" data-width="640" data-height="360"></div></div>
<!--클릭시 영상출력-->
<a href="#none" vimeoplayer data-id="59777392" data-start="true" data-sound="true" data-loop="false">비메오 영상레이어</a>

자! 이제 메인페이지의 대배너 부분에 영상을 넣어봅시다.
옵션이 많으므로 배너관리로는 설정이 어렵고, html 코드로 넣겠습니다.

대배너의 코드는 아래와 같습니다.

<!--대배너-->
<div module="bannermanage2_display_7" class="sp-slider-index-1 sp-slider full hold" data-fade="true" data-autoplayspeed="5000" data-custompaging="true" data-speed="300" hover="false" arrows="blk-h-l" arrowsArea="h-in-46" arrowfix="true" dots="button" dotsArea="in-b-c" style="margin-top:-247px;">
<div class="sp-slider-loop" data-title="{$title}"><a href="{$href}" {$target}>{$banner}</a></div>
<div class="sp-slider-loop" data-title="{$title}"><a href="{$href}" {$target}>{$banner}</a></div>
</div><!--//여기까지-->

여기서 유투브를 재생하려면 아래와 같이 수정합니다.

<!--대배너-->
<!--유투브 플레이어-->
<!--@css(/_sp/apps/addon/youtube/youtube.css)-->
<!--@js(/_sp/apps/addon/youtube/youtube.js)-->
<div module="bannermanage2_display_7" class="sp-slider-index-1 sp-slider full hold" data-fade="true" data-autoplayspeed="5000" data-custompaging="true" data-speed="300" hover="false" arrows="blk-h-l" arrowsArea="h-in-46" arrowfix="true" dots="button" dotsArea="in-b-c" style="margin-top:-247px;">
<div class="sp-slider-loop" data-title="{$title}"><a href="{$href}" {$target}>{$banner}</a></div>
<div class="sp-slider-loop" data-title="{$title}"><a href="{$href}" {$target}>{$banner}</a></div>
<div class="sp-slider-loop" data-title="타이틀">
<div youtubeouter="fixed"><div youtube data-id="0Rmz9_jagKo" data-start="true" data-sound="false" data-loop="true" data-width="3000" data-height="1350" data-fixheight="1000" data-center="true"></div></div>
</div>
</div><!--//여기까지-->

구조를 보면 우선 유투브 플레이어를 수행할 라이브러리를 불러오고,
그다음 실제로 수행할 코드를 입력합니다. 슬라이더의 3번째 영역에 들어가라고 설정하고 있습니다.

만약 첫번째로 영상이 보여지고 싶다면 아래처럼 수정하시면 됩니다.

<!--대배너-->
<!--유투브 플레이어-->
<!--@css(/_sp/apps/addon/youtube/youtube.css)-->
<!--@js(/_sp/apps/addon/youtube/youtube.js)-->
<div module="bannermanage2_display_7" class="sp-slider-index-1 sp-slider full hold" data-fade="true" data-autoplayspeed="5000" data-custompaging="true" data-speed="300" hover="false" arrows="blk-h-l" arrowsArea="h-in-46" arrowfix="true" dots="button" dotsArea="in-b-c" style="margin-top:-247px;">
<div class="sp-slider-loop" data-title="타이틀">
<div youtubeouter="fixed"><div youtube data-id="0Rmz9_jagKo" data-start="true" data-sound="false" data-loop="true" data-width="3000" data-height="1350" data-fixheight="1000" data-center="true"></div></div>
</div>
<div class="sp-slider-loop" data-title="{$title}"><a href="{$href}" {$target}>{$banner}</a></div>
<div class="sp-slider-loop" data-title="{$title}"><a href="{$href}" {$target}>{$banner}</a></div>
</div><!--//여기까지-->

이 코드는 모든 페이지에서 사용이 가능한 라이브러리처럼 제작이 되어 있습니다.
만약 로그인 페이지에 보여주고 싶다면  로그인 페이지의 원하는 부분에 아래처럼 넣어서 영상을 출력할 수 있습니다.

<!--유투브 플레이어-->
<!--@css(/_sp/apps/addon/youtube/youtube.css)-->
<!--@js(/_sp/apps/addon/youtube/youtube.js)-->
<div youtubeouter><div youtube data-id="M7lc1UVf-VE" data-start="false" data-sound="false" data-loop="true" data-width="640" data-height="360"></div></div>

영상을 바로 재생하지 않고, 클릭시 재생하고 싶다면 아래의 코드를 이용하시길 바랍니다.

<!--유투브 플레이어-->
<!--@css(/_sp/apps/addon/youtube/youtube.css)-->
<!--@js(/_sp/apps/addon/youtube/youtube.js)-->
<a href="#none" youtubeplayer data-id="M7lc1UVf-VE" data-start="true" data-sound="true" data-loop="false">클릭할 이미지 혹은 텍스트를 입력하세요.</a>

비메오의 경우 코드를 비메오로 수정셔서 사용하시길 바랍니다.

유투브나 비메오 둘다 저작권 부분의 문제가 있을 수 있으므로
가급적 영상을 올리실 땐 직접 제작한 영상을 올리시길 바랍니다.


  • PRODUCT
  • COUPON
  • DETAIL
  • INFORMATION
  • WITH ITEM
  • REVIEW
  • Q & A
  • PRODUCT
  • COUPON
  • DETAIL
  • INFORMATION
  • WITH ITEM
  • REVIEW
  • Q & A

REVIEW

게시물이 없습니다

  • PRODUCT
  • COUPON
  • DETAIL
  • INFORMATION
  • WITH ITEM
  • REVIEW
  • Q & A

Q & A

게시물이 없습니다