CSS_videojs 플레이 버튼 모양 변경 하기

videojs 라는 자바스크립트 라이브러리가 있다.

개인적으로 기본 플레이버튼도 괜찮다고 생각하지만 위에서 바꾸라고 하니까 한번 바꿔보자

일단 html에서 이런식으로 videojs를 사용중이다.

<video id="myVideo" class="video-js vjs-big-play-button vjs-big-play-centered"></video>

이제 이 버튼을 동그랗게 바꿔보자.

CSS

.video-js.video-js .vjs-big-play-button {
    opacity: .7;
    width: 80px;
    height: 80px;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    border-radius: 90px;
    border-style: solid;
    border-width: 2px;
    border-color: #FFFFFF;
    font-size: 3rem;
    text-align: center;
    line-height: 75px;
}

여기서 중요한거는
저 플레이 버튼안에 있는 삼각형아이콘은 폰트로 처리됨
크기 키우고싶으면 font-size를 바꿀것.
그리고 text-align과 line-height는 그 아이콘 가운데로 맞추려고 저렇게 쓴거임.

그리고 혹시

멈춤 상태일 때 계속 플레이버튼 나오게 하고 싶다면

.vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block;
}

CSS에 추가하면 된다.

그럼 저기 위에보이는 모양으로 나옴.

끝.