[CSS] HTML Video Controls 버튼, 아이콘 숨기기

Google Chrome 에서 동작

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

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

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

 

<video controls> </video>

 

/* style.css */

/* 숨기려는 버튼을 골라서 쓰자 */

/* 전체화면 버튼 */
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;
}