[CSS] Video tag Controls 기능 숨기기

Google Chrome 에서 동작

비디오 태그에 controls 라는 옵션을 주면

밑에 비디오를 컨트롤하는 UI가 띄워진다.

근데 내가 필요 없는, 숨겨야 하는 버튼이 있는 경우 숨길 수 있다. (전체화면, 재생 등)

/* 전체화면 버튼 */ 
video::-webkit-media-controls-fullscreen-button {} 

/* 일시정지, 재생 버튼 */ 
video::-webkit-media-controls-play-button {} 

/* 재생 슬라이드..? */ 
video::-webkit-media-controls-timeline {} 

/* 현재 진행 시간 */ 
video::-webkit-media-controls-current-time-display{} 

/* 전체 시간 */ 
video::-webkit-media-controls-time-remaining-display {} 

/* 음소거 버튼 */ 
video::-webkit-media-controls-mute-button {} 

/* 볼륨 조절 슬라이드 */ 
video::-webkit-media-controls-volume-slider {} 

/* 괄호에 display: none !important; 를 추가하면된다. 
예 ) 전체화면 전환 버튼을 숨긴다. 다만 더블클릭으로 전체화면이 되는 기능등은 
그대로고 단지 버튼만 없앤다. */ 
video::-webkit-media-controls-fullscreen-button { display: none !important; }