2017 Nam Insik Portfolio site ː Designed by werty.co.kr ː nis@werty.co.kr
 
 
 
 
 
 
 
 
풀사이즈 배경으로 동영상 or 이미지 삽입하기

풀사이즈 배경으로 동영상(또는 이미지) 삽입하기

미리보기  다운로드


인터넷 속도도 빨라 졌기 때문인지 풀사이즈 백그라운드로 동영상을 삽입하는 사례들이 종종 있습니다.
예전에는 이미지로 어떻게든 시원하게 처리했었지만 이제는 동영상으로 더욱 인터렉티브한 사이트를 제공할 수 있게 되었습니다.
더군다나 youtube나 vimeo와 같은 비디오 서비스의 동영상도 백그라운드로 넣을 수 있기 때문에 서버에 대한 부담감도 많이 줄어들었습니다.
이번에는 간단하게 일반적인 동영상 파일을 백그라운드로 넣고 풀사이즈로 만드는 라이브러리 사용법을 알려드리겠습니다.
터치 디바이스로 접속하게 되면 동영상 대신 이미지로 대체되게 설정 하였습니다.

설정 이유는 iOS의 경우(아이폰) 웹브라우저에서 동영상이 재생되면 단독적으로 플레이어가 실행이 되어 영상은 그 플레이어에서 따로 실행이 됩니다.   웹브라우저에서 삽입된 상태로 보여주기 힘들기 때문이기도 하고 동영상을 모바일로 배경에 삽입한다면 사용자의 휴대폰 데이터를 사용하게 하는 불편한 진실과 로딩 속도와 용량에 대한 모바일 기기의 부담감은 아직은 있기에 이미지로 대체하는 것입니다.

이제 사용 방법에 대해 간단히 설명드리겠습니다.


풀사이즈 배경을 노출할 엘리먼트를 만듭니다.

 관련 자바스크립트 라이브러리들을 로드합니다.
웹브라우저 랜더링에 대해 자세히 모르신다면 태그 바로 위에 로드 코드를 삽입합니다.

 그리고 바로 밑에 풀사이즈 비디오 또는 이미지에 대한 설정을 스크립트로 작성합니다.

자세히 모르시겠으면, 샘플파일을 다운로드하여 소스를 열어보시는 것도 좋습니다.
 다운로드

HoldHolic

nain

이메일 : nis@naminsik.com

리뉴얼하려고 생각한지가 어느덧 3년이 지났다. ㅠ 망...
  • 이지현

    안녕하세요제게 꼭 필요한 내용 제공해 주셔서 너무너무 감사해 하는 1인입니다. ^^ 이 소스 다운받아서 적용해 봤는데 영상 잘 나오고 좋아요 ^^ 한가지 궁금한 점이 있는데요 동영상 나오는 부분 높이값이 지정될 경우(가로100%인데 높이값이 400px) 동영상 상단 부분을 중심으로 나오더라고요 이것을 영상의 중간 부분 중심으로 나오게 조정하려면 어떻게 해야 하는지.. bigvideo.js 파일 열어봤는데 모르겠어요 ㅠㅠ 조심스럽게 답변좀 부탁드려요 될까요.. 제 메일은 mary9909@naver.com 입니다.

    • werty

      그때 찾아서 답을 드린다는게 너무 늦었네요 ㅠ
      아쉽게도 해당 플러그인이 그렇게 조절하는 기능을 제공하지 않아 직접 스크립트로 조절하는 수 밖에 없더라구요.
      도움드리지 못해서 죄송합니다. ㅠ

  • 이은정

    ㅜㅜ안녕하세요 너무 좋은 정보 감사합니다. 그런데 새로고침시 사이즈 계산 하는것같은..?맞나요? ㅎㅎㅎㅎ 그 글자들이 먼저나온후 메인이 나오는데 그거는 어쩔수없는건가요? ㅜㅜ

    • naminsik

      곧 수정해서 올려드릴께용~

      • 이은정

        ㅜㅜ고맙습니다. 너무 좋은 정보라 가져다 쓰기 맘에걸려서 다른 방법으로 했거든요.. 나중을위해서 받아놓고 공부가 될수있을때 참고하겠습니다 ㅜㅜ멋지십니다

      • 이은정

        아 제가 지금 메인을 동영상으로 보여지게끔하는 홈페이지를 만들고있는데요.
        유튜브에 영상올리고 iframe으로 끌어오면 실서버에 올렸을때
        로딩이 많이 오래걸릴까요???

.