[javascript/jquery] plyr 플레이어 버튼 색상 변경 방법

[javascript/jquery] plyr 플레이어 버튼 색상 변경 방법

 

made by Gemini

 

안녕하세요!

 

오늘은 다시 본업으로 돌아와서

 

최근에 plyr 영상 플레이어 커스텀 요청을 받아서

 

라이브러리를 분석해보고 검색해서 알아된 내용을 공유해볼까 합니다!

 

여러 커스텀이 있지만,

 

이번에는 아래 이미지처럼 영상 하단에 나오는 컨트롤바중에서

 

 

 

버튼의 색상을 변경하는 코드를 공유해보려고 합니다!

 

/* style.css 파일 또는 <style> 태그 안에 추가 */

/* 모든 plyr 컨트롤 아이콘의 기본 색상 변경 */
.plyr__controls .plyr__control svg {
    fill: #ff00ff; /* 보라색으로 변경 */
}

/* 특정 버튼 (예: 재생 버튼)만 색상 변경 */
.plyr__controls .plyr__control[data-plyr="play"] svg {
    fill: #00ff00; /* 녹색으로 변경 */
}

/* 재생/일시정지 버튼 (두 아이콘 모두 영향을 받음) */
.plyr__controls .plyr__control[data-plyr="play"] svg,
.plyr__controls .plyr__control[data-plyr="pause"] svg {
    fill: #0000ff; /* 파란색으로 변경 */
}

/* 볼륨 조절 아이콘 */
.plyr__controls .plyr__control[data-plyr="mute"] svg,
.plyr__controls .plyr__control[data-plyr="unmute"] svg {
    fill: #ff9900; /* 주황색으로 변경 */
}

/* 전체화면 아이콘 */
.plyr__controls .plyr__control[data-plyr="fullscreen"] svg {
    fill: #00ffff; /* 청록색으로 변경 */
}

/* 특정 아이콘에 hover 시 색상 변경 */
.plyr__controls .plyr__control[data-plyr="play"]:hover svg {
    fill: #ff0000; /* 호버 시 빨간색으로 변경 */
}

 

 

위 내용보시면 아시겠지만,

 

css 클래스는 plyr__control 이렇게 공통적으로 쓰여있고,

 

그중에서 버튼들 마다 data-plyr 라는 속성값이 다르게 설정이 되어 있습니다!

 

그중에 원하는 것의 속성값을 찾아서 색상을 변경할때 사용하시면 됩니다!

 

도움이 되셨다면, 구독/공감/댓글 부탁드립니다!

 

감사합니다!