비메오 전체화면 버튼 커스터마이징 ( Vimeo fullscreen custom button )

비메오 Vimeo 를 이용하여 동영상 플레이어를 사이트에 넣을때, 기본 옵션으로 세팅하게 되면 플레이 버튼, 볼륨조절 등을 비롯한 각종 컨트롤러가 표시되게 됩니다. 

 

 

 

하지만, 아래와 같이 자신이 원하는 형태로 커스터마이징을 하려면, 비메오 에서 제공하는 API 를 이용해야 합니다. 

 

 

비메오 API 는 아래 사이트에서 확인할 수 있는데, 아무리 설명을 찾아봐도 전체화면 (FullScreen) 과 관련된 함수를 찾아볼 수가 없었습니다. 

 

https://developer.vimeo.com/player/sdk

 

 

구글형님한테 열심히 물어본 결과, 전체화면 기능은 브라우저의 특성에 따라 달라지기 때문에 비메오에서 API를 제공하는게 아니라 브라우저에서 제공하는 옵션을 이용해야 된다고 합니다. 

 

 

커스터마이징한 전체보기 아이콘을 클릭했을 경우 아래 toggleFullScreen 함수를 호출해주면 바로 처리가능합니다. 

 

function toggleFullScreen() 

{
  if (!document.fullscreenElement &&     
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

 

 

아래 포스팅을 참고했습니다

https://stackoverflow.com/questions/23779196/is-it-possible-to-switch-on-and-off-video-fullscreen-in-vimeo-player-froogaloop