유튜브 플레이어 API 알아보기

 * 이 포스트에서 소개하는 내용은 YouTube 개발자(새창) 홈페이지에 소개된 내용을 인용하여 작성되었습니다.

 유튜브에서 제공하는 플레이어 API를 사용하여 기본 설정을 구성하고 플레이어 인터페이스를 조정하여 귀하의 홈페이지, 블로그 등에 적합한 고유의 플레이어를 구성할 수 있습니다. 이 포스트에서는 유튜브 플레이어 API에서 제공하는 유용한 코드를 소개하며, 이미지로 소개가 가능한 부분은 이미지로 소개하였지만, 그렇지 않은 경우에는 유튜브 동영상 플레이어로 대체하였으니 이점 양해 부탁드립니다.

자동재생

autoplay

 유튜브 플레이어가 첨부된 페이지의 로딩이 완료되면 영상의 자동 재생 여부를 지정할 수 있도록 해주는 옵션이며, 0과 1로 구분하여 동작하는 옵션입니다. 자동재생을 하고자 하는 동영상에 autoplay=1 옵션을 적용하여 사용할 수 있으며, 상단에 첨부된 유튜브 동영상은 여러분의 이해를 돕기 위해서 필자의 블로그에서 사용된 유튜브 동영상 중 하나입니다.

반복 재생

loop

 유튜브 플레이어에서 재생되고 있는 동영상을 반복하여 재생해줄 수 있도록 해주는 옵션이며, 0과 1로 구분하여 동작하는 옵션입니다. 반복 재생을 하고자 하는 동영상에 loop=1 옵션을 적용하여 사용할 수 있으며, 상단에 첨부한 유튜브 동영상은 여러분의 이해를 돕기 위해서 필자의 블로그에 사용된 유튜브 동영상 중 하나입니다.

HD 영상 재생하기

vq

 유튜브에 고화질로 올린 동영상을 유튜브 플레이어에서 창 크기에 무관하게 고화질로 재생되도록 해주는 옵션이며, highres, hd1080, hd720등으로 구분하여 동작하는 옵션입니다. 고화질로 재생하도록 하고자 하는 동영상에 vq=highres 또는 vq=hd1080/vq=hd720 등의 옵션을 적용하여 사용할 수 있으며, 상단에 첨부한 유튜브 동영상은 필자의 유튜브 채널에 게시된 동영상 중 하나에 highres 옵션을 적용하여 고화질로 나타나도록 한 동영상 중 하나입니다.

YouTube 테마 변경하기

theme

 유튜브 플레이어에서 제공하고 있는 2가지 테마로 변경할 수 있는 옵션이며, dark와 light로 구분하여 동작하는 옵션입니다. 왼쪽의 스크린 캡처는 옵션을 적용하지 않거나 dark를 적용한 플레이어의 모습이고, 오른쪽의 스크린 캡처는 light 옵션을 적용하여 테마를 변경한 후의 모습입니다.

YouTube 진행 표시줄 색상 변경하기

color

 유튜브 플레이어에서 제공하고 있는 2가지 진행 표시줄 색상으로 변경할 수 있는 옵션이며, reg와 white로 구분하여 동작하는 옵션입니다. 왼쪽의 스크린 캡처는 옵션을 적용하지 않거나 red를 적용한 진행 표시줄의 모습이고, 오른쪽의 스크린 캡처는 white 옵션을 적용하여 진행 표시줄의 색상을 변경한 후의 모습입니다. 참고로, color 옵션은 유튜브 플레이어의 로고를 없애주는 modestbranding 옵션과 함께 사용될 수 없습니다.

타이틀 숨기기

showinfo

 유튜브 플레이어의 상단에 나타나는 타이틀을 숨길 수 있는 옵션이며, 0과 1로 구분하여 동작하는 옵션입니다. 왼쪽의 스크린 캡처는 옵션을 적용하지 않거나 0을 기재하여 동작을 허용했을 때 나타나는 타이틀의 모습이고, 오른쪽 스크린 캡처는 1을 기재하여 타이틀이 숨겨지도록 변경한 후의 모습입니다.

컨트롤러 숨기기

controls

 유튜브 플레이어의 하단에 나타나는 컨트롤러를 숨길 수 있는 옵션이며, 0과 1, 2로 구분하여 동작하는 옵션입니다. 왼쪽의 스크린 캡처는 1 또는 2 옵션을 적용한 컨트롤러의 모습이고, 오른쪽의 스크린 캡처는 0 옵션을 적용하여 컨트롤러가 숨겨지도록 변경한 후의 모습입니다. 참고로, 1 옵션은 유튜브 플레이어의 기본값으로 재생 시에 컨트롤러가 나타났다가 일정 시간이 지나면 사라지는 옵션이고, 2 옵션은 항상 컨트롤러가 표시되는 옵션입니다.

컨트롤러에서 전체화면 버튼 숨기기

fs

 유튜브 플레이어의 컨트롤러에 나타나는 전체화면 버튼을 숨기는 옵션이며, 0과 1로 구분하여 동작하는 옵션입니다. 전체화면을 허용하고 싶으시다면, 해당 옵션을 기재하지 않거나 0으로 기재하시면 해당 기능의 동작을 제어할 수 있습니다. 왼쪽 스크린 캡처는 컨트롤러에서 전체화면 버튼이 나타나고 있는 모습이고, 오른쪽 스크린 캡처는 fs 옵션을 적용하여 전체화면 버튼이 나타나지 않고 있는 모습입니다.

플레이어 컨트롤러나 진행 표시줄 숨기기

autohide

 유튜브 플레이어의 컨트롤러와 진행 표시줄을 숨길 수 있는 옵션이며, 0과 1, 2로 구분하여 동작하는 옵션입니다. 기본값은 일정 시간이 지난 이후에는 하단에 작게 진행 표시줄이 표시되고, 0의 경우에는 진행 표시줄이 크게 표시되고 일정 시간이 지나면 컨트롤러와 진행 표시줄을 모두 감추는 옵션입니다. 1의 경우에는 재생 후 일정 시간이 지나면 타이틀과 컨트롤러가 숨겨지며, 다시 유튜브 플레이어에서 마우스를 움직여 나타나도록 할 수 있으며, 2의 경우에는 기본값보다 작게 진행 표시줄이 표시됩니다.

키보드로 유튜브 플레이어 조작 제한하기

disablekb

 유튜브 플레이어를 키보드로 조작하는 것을 제한하는 옵션이며, 0과 1로 구분하여 동작하는 옵션입니다. 상단에 첨부한 유튜브 동영상은 일반 화면 및 전체화면에서 키보드를 사용할 수 없도록 하는 disablekb 옵션이 적용된 모습입니다. 키보드의 사용을 허용하고 싶으시다면, 해당 옵션을 기재하지 않거나 0으로 기재하시면 해당 기능의 동작을 제어할 수 있습니다.

영상의 시작 구간 및 종료 구간 설정

start , end

 유튜브 플레이어에서 재생되고 있는 동영상의 시작 구간(start)과 종료 구간(end)를 지정하는 옵션입니다. 상단에 첨부한 유튜브 동영상은 시작 구간은 5초, 종료 구간은 10초로 이루어진 예문입니다. 이 옵션은 동영상의 길이가 긴 동영상을 외부에 특정 부분만 링크하고자 할 때 유용하게 사용할 수 있는 옵션입니다.

추천 영상 표시 안 하기

rel

 유튜브 플레이어를 이용한 동영상 재생이 완료되었을 때 추천 영상의 표시 유무를 설정하는 옵션이며, 0과 1로 구분하여 동작하는 옵션입니다. 왼쪽의 스크린 캡처는 동영상 재생이 완료된 후 추천 영상이 표시되고 있는 모습이고, 오른쪽의 스크린 캡처는 동영상 재생이 완료된 후 추천 영상이 나타나지 않는 모습입니다.

유튜브 플레이어 로고 없애기

modestbranding

 유튜브 플레이어의  컨트룰러에 표시된 유튜브 로고의 표시 유무를 설정하는 옵션이며, 0과 1로 구분하여 동작하는 옵션입니다. 왼쪽의 스크린 캡처는 컨트롤러에 표시된 유튜브 로고가 나타나는 상태이고, 오른쪽의 스크린 캡처는 컨트롤러에 유튜브 로고가 나타나지 않는 상태의 모습입니다.