[javascript] Plyr을 사용하여 비디오 플레이어에 테마 추가하기

27 Nov 2023

javascript

Plyr은 HTML5 비디오 플레이어를 쉽게 사용할 수 있는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 사용자 정의 테마를 비디오 플레이어에 추가할 수 있습니다. 이번 포스트에서는 Plyr을 사용하여 비디오 플레이어에 테마를 추가하는 방법을 알아보겠습니다.

Plyr 설치하기

Plyr은 NPM을 통해 설치할 수 있습니다. 아래 명령을 사용하여 Plyr을 설치하세요:

npm install plyr

Plyr 테마 추가하기

Plyr의 CSS 파일을 HTML 문서에 추가합니다. 아래 코드를 <head> 태그에 추가하세요:

<link rel="stylesheet" href="path/to/plyr.css">

Plyr의 JS 파일을 HTML 문서에 추가합니다. 아래 코드를 <body> 태그 마지막 부분에 추가하세요:

<script src="path/to/plyr.js"></script>

비디오 엘리먼트를 추가하고 Plyr 클래스를 적용합니다. 아래 코드를 참고하세요:

<div class="plyr__video-embed">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
</div>

JavaScript 코드를 추가하여 Plyr을 초기화합니다. 아래 코드를 참고하세요:

const player = new Plyr('.plyr__video-embed');

테마를 적용하려면 Plyr의 CSS 파일을 수정하거나 새로운 CSS 파일을 생성하여 스타일을 변경합니다. 예를 들어, Plyr의 진행 막대 색상을 변경하려면 아래 CSS 코드를 추가하세요:

.plyr--full .plyr__controls .plyr__progress input[type="range"]::-webkit-slider-thumb {
  background-color: #f00;
}

마무리

이제 Plyr을 사용하여 비디오 플레이어에 테마를 추가하는 방법을 알아보았습니다. Plyr을 활용하여 웹사이트나 애플리케이션에서 멋진 비디오 플레이어를 만들어보세요. 더 자세한 내용은 Plyr 공식 문서를 참고하시기 바랍니다.