언젠가 쇼핑몰을 운영하는 거래처분이 제품 상세페이지에 동영상이 나오게하려면 어떻게 해야하냐고 도움을 요청한적이 있다.
아래처럼 상세페이지 디자인을 이미 완료한 후, 그 안 일부분에 동영상을 넣으려 하셨기때문에 처음엔 플래시로 하는 방법을 알려드려야하나...했다.

 

 

 

 

 

 

 


그러나 플래시로 작업하면 디자인안에 예쁘게 동영상이 들어가긴 하지만 모바일에선 구동되지 않는다는 치명적인 단점이 있다.

 

소비자들이 모바일로 쇼핑하는 경향이 커지고있는 지금, 그건 별로 바람직하지 않기에
차라리 페이지디자인을 조금 바꿔 유투브 동영상을 넣는 방법이 가장 간단하면서도 페이지 인식도 빠르다고 추천드렸다.

 

직접 상세페이지안에 동영상을 업로드하면 페이지용량이 커지고, 링크로 동영상을 끌어오는것보다 로딩시간이 지연되어, 페이지 전환이 빠른 온라인 사용자들을 쫒아낼 소지가 충분하기 때문이다.  

 

 

 

 

그렇다면 유투브 동영상을 넣을때 왜 굳이 페이지 디자인을 바꿔야하나?

테이블을 짜던지 플롯으로 동영상이 들어갈 영역을 만들어 위같은 위치에 유투브 동영상이 들어가면 안되느냐? 할수도 있겠지만

전체 코딩을 내 맘대로 할 수 있는 개인쇼핑몰이면 모를까, 오픈마켓이나 종합몰의 경우

판매자가 프레임안에 단순히 상세페이지를 올리는 구조로 되어있어 코딩에 대한 여러가지 제약이 따르기 때문에 사실 시도할 수 있는 범위가 크지 않다.

 

예를들어 이미지를 배경으로 깔고 그 위에 띄워 대상을 일정한 위치에 배치시키는 포지션(position)속성을 사용한다쳐보자.

이 때, 부모값에 따라 영향을 미치는 relative는 당연히 사용할 수 없고, 절대값인 absolute 를 사용할경우

내가 손댈수 없는 영역인 PC와 모바일에서의 구조가 이미 다르게 제작되어 있게 때문에 기준점을 맞출 수 없다.

 

PC에서 동영상을 제대로 된 위치에 보이게 넣었다 할지라도 모바일에선 화면밖으로 나가버리거나 전혀 엉뚱한곳에 동영상이 들어가게 된다는것이다.

 

 

 

 

 

 

 

뭐 그런고로 자체 홈페이지를 만드는게 아니라 상세페이지 정도 만드는거라면

그냥 동영상이 들어갈 부분을 기준으로 아래처럼 상세페이지 위 아래를 분리시켜 디자인하는게 속편한 방법이라 할 수 있다.

 

 

 

 

 

 

 

이렇게 디자인을 했다면, 상세페이지 상단(top.jpg)과 상세페이지 하단(bottom.jpg)의 이미지를 따로 저장해주고

호스팅 서버에 이미지를 올려,

상세페이지 HTML작성하는 곳에 아래처럼 넣어주면 된다. 

 

 

 

 

때, 가운데 유투브의 코드는 동영상 우측아래에 마우스 우클릭하여 '소스 코드 복사'를 선택한 후 복사할 곳에 Ctrl+V로 붙여넣으면 된다.

 

 

 

 

여기서 width="640" 가로사이즈, height="360"세로사이즈

원하는 동영상의 가로세로 사이즈를 조정해 줄 수 있다.

 

만일, 이렇게 했는데 모바일에서 봤을때 동영상이 화면밖으로 벗어났다면 동영상 링크주소앞에 "http://"가 빠져있기 때문이므로 넣어주도록 하자.

 

 

 


 

 

유투브에 동영상 올리는 방법을 모른다면 아래 링크를 참고할 것.
http://yslife.tistory.com/557

 

굳이 모바일에서 안보여져도 되니 그냥 플래시로 예쁘게 동영상을 만들어 넣고 싶다면, 아래같은 방법도 있으니 참고하자.

http://yslife.tistory.com/654

 

 

 

 

 
 
 
Posted by 두여자 Y&S

댓글을 달아 주세요

  1. 안녕하세요 .

    올려주신 내용 잘 보았습니다.
    아무리 수정을 해도 유튜브에서 가져온 동영상이 모바일에서 화면 밖으로 벗어나네요..
    한번 봐주실수 있으실까요????
    꼭 부탁드립닌다.

    2017.03.07 10:35 [ ADDR : EDIT/ DEL : REPLY ]