우선 유투브와 비메오 두가지 방식의 코드를 안내드립니다.
개발에 지식이 있으신분이라면 그대로 사용을 하시고, 그렇지 않다면 아래 안내를 확인하세요.
아래는 기본적인 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>
비메오의 경우 코드를 비메오로 수정셔서 사용하시길 바랍니다.
유투브나 비메오 둘다 저작권 부분의 문제가 있을 수 있으므로
가급적 영상을 올리실 땐 직접 제작한 영상을 올리시길 바랍니다.