[CSS] Video tag Controls 기능 숨기기
2021. 11. 3. 09:34ㆍCSS
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; }
'CSS' 카테고리의 다른 글
[javascript/snippet] 말줄임 처리하기 (0) | 2021.06.30 |
---|