불타는 코딩🔥

쇼핑몰 재직 중 만든 썸네일에 영상띄우기 pc버전

필요한 부분만 구성한 약식 UI로 만들어봤다.

실사용하려면 콘텐츠를 생산해야하니 촬영팀 부담이 크다... 

ps. 영상은 존경하는 김포프님 영상입니다.  

#설명 

1. productNumber에 상품번호, productMedia 에 매치시킬 영상링크 두 가지를 설정한다.

2. 해당 상품번호가 페이지내 상품목록에 있을 경우, [영상보기] 버튼을 노출 시킴.

3. [영상보기] 버튼 클릭 시 모달창과 영상이 띄어진다.

4. 띄어진 모달창엔 클릭한 상품의 상품명, 상품링크가 새겨진다.

5. [닫기] 혹은 모달창 외부를 클릭할 경우 닫힌다.

끝

#ex

상품번호가 127464 일 경우, https://www.youtube.com/embed/6eSyE9cXQ-U 영상이 출력된다.

productInfo = [

    {

        "productNumber": "127464",

        "productMedia": "https://www.youtube.com/embed/6eSyE9cXQ-U"

        }, {

        "productNumber": "127434",

        "productMedia": "https://www.youtube.com/embed/YrweCYauK6o"

        }

          ];

[ 0.5× ] 보기로 확인하시면 편리합니다.