유투브(YouTube) 동영상을 웹 사이트 배경으로 사용하기

2000년대 중반부터 고해상도 사진이나 일러스트를 메인 페이지 배경으로 사용하는 웹 사이트들이 하나 둘 등장하기 시작했다. 브라우저 화면 전체를 덮는 배경 그림의 활용은 개인 혹은 단체, 제품의 이미지 전달에 있어 종래의 패턴이나 단색으로 이루어진 배경보다 효과적이었고 반응형 디자인(responsive web design), 패럴랙스 스크롤(parallax scrolling) 등 새로운 웹 디자인 기술과 시너지 효과를 발휘하면서 주요 트렌드로 자리잡게 되었다.

통신망 성능의 발달과 함께 근래에는 이미지 배경에서 더욱 나아가 동영상을 페이지 배경으로 삽입하는 웹 사이트도 늘어나고 있다. 동영상 배경의 모범적인 활용 사례로 추천하는 웹 사이트들은 아래와 같다.

- Y.co Yacht : http://y.co/
- Maple : https://maple.com/
- Switzerland Inc : http://switzerlandinc.com/
- BKWLD : http://www.bkwld.com/
- Big Cartel : https://www.bigcartel.com/

고품질의 동영상 배경은 웹 사이트를 한 폭의 예술 작품처럼 보이도록 만들기도 하지만 서버 입장에서는 어마어마한 트래픽을 잡아먹는 괴물이기도 하다. 이러한 문제를 해결하기 위해 스트리밍 서버를 따로 운용하거나 동영상 화질을 낮추어 인코딩하는 경우가 많다.

하지만 만약, 대용량 무료 스트리밍 서비스를 활용할 수 있다면 어떨까?

바로바로퀵서비스(http://www.allbaro.co.kr/)의 메인 페이지는 YouTube에 업로드 된 동영상을 embed하여 배경으로 출력한다. 소스는 다음과 같다. 결과가 정상적으로 출력되지 않을 경우 RERUN 버튼을 클릭하면 동영상이 다시 로드된다. 단, 모바일에서는 동영상 자동 재생이 지원되지 않기 때문에 플레이어 iframe을 숨기고 필요에 따라 배경 이미지로 대체한다.

코드 불러오는 중...

위 코드에서 YouTube 동영상의 아이디 값 뒤에 붙는 매개변수(parameter)가 제어하는 기능은 아래와 같다.

- autoplay : 자동 재생 여부
- controls : 재생 컨트롤 표기 여부
- showinfo : 영상 제목 출력 여부
- wmode : 윈도우 모드 (flash와 동일)
- autohide : 컨트롤 자동 숨김 여부
- loop : 영상 반복 재생 여부
- playlist : 다음 플레이 영상 지정

YouTube 내장 플레이어의 매개변수에 대한 더 자세한 사항은 Google Developers 기술문서 참고(한글, 클릭하면 이동).

스크립트 부분을 보면, YouTube 동영상은 종횡비가 고정된 상태로 container의 크기 속성 중 상수를 기준으로 크기가 변하기 때문에 위 코드에서는 브라우저 너비와 종횡비의 곱을 구하여 높이 속성을 대체한다. 실제 개발시에는 DOM ready 이후 최초 한 번 실행하고 $(window).resize()에도 바인드하면 더욱 효과적이다.

위 코드의 개념을 이해한 뒤에는 입맛에 맞게 코딩하면 되는데 OS와 브라우저 환경에 따라 동영상 container에 z-index 속성이 적용되지 않고 동영상 플레이어가 오버레이 개체를 덮어버리는 경우가 있다. 보통 Windows 7/8 + IE 조합에서 자주 발생하는 버그인데 wmode=opaque 패러미터를 위 코드와 같이 영상 아이디 뒤에 추가하여 해결할 수 있다.

* 2016년 1월 6일 내용 추가

tubular(http://www.seanmccambridge.com/tubular/)는 YouTube 동영상을 간편하게 웹 페이지 배경으로 지정할 수 있는 jQuery 플러그인이다. ratio, repeat, mute 등 다양한 옵션을 통해 영상을 제어할 수 있다.