[javascript] Plyr의 테마 변경하기

27 Nov 2023

javascript

Plyr은 HTML5 동영상 플레이어의 가벼운 및 사용하기 쉬운 대체 모듈입니다. Plyr을 사용하면 웹사이트나 앱에서 동영상을 플레이하는 기능을 간편하게 추가할 수 있습니다. 이번 포스트에서는 Plyr의 테마를 변경하는 방법에 대해 알아보겠습니다.

Plyr은 내장된 테마 스타일을 제공합니다. 하지만 필요에 따라 테마를 변경하고자 할 수도 있습니다. 다음은 Plyr 플레이어의 테마를 변경하는 방법입니다.

Plyr 플레이어 스타일 파일을 다운로드합니다. Plyr의 스타일 파일은 모든 필요한 스타일과 클래스를 포함하고 있습니다. 이 파일은 Plyr의 공식 웹사이트에서 다운로드할 수 있습니다.
다운로드한 파일을 웹사이트에 포함시킵니다. 파일을 웹사이트의 적절한 위치에 저장하고, HTML 파일에서 링크를 추가하여 파일을 포함시킵니다. 예를 들어, 다운로드한 파일을 “css/plyr.css” 위치에 저장한 경우 다음과 같이 링크를 추가할 수 있습니다.

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

테마 파일을 적용합니다. Plyr 플레이어의 테마를 변경하려면, 다음과 같이 추가적인 CSS 클래스를 사용하여 테마 파일을 적용할 수 있습니다.

<div class="plyr__video-embed" data-plyr-provider="youtube" data-plyr-embed-id="VIDEO_ID">
  <div class="plyr__container">
    <video data-plyr="[OPTIONS]">
      <!-- Video source -->
      <source src="video.mp4" type="video/mp4">
    </video>
  </div>
</div>

위의 예제에서 plyr__video-embed 클래스는 Plyr 플레이어의 테마를 변경하는 데 사용되는 클래스입니다. 원하는 테마에 해당하는 클래스로 변경해야 합니다.

Plyr 플레이어 초기화합니다. 테마 파일을 적용한 후에는 Plyr 플레이어를 초기화해야 합니다. 이를 위해 Plyr의 자바스크립트 라이브러리를 사용하여 Plyr 플레이어를 초기화합니다.

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

위의 코드에서 .plyr__video-embed 클래스는 Plyr 플레이어를 초기화하는 데 사용되는 클래스입니다. 만약 다른 클래스를 사용하여 플레이어를 초기화한 경우에는 해당하는 클래스로 변경해야 합니다.

이제 Plyr 플레이어의 테마를 변경하는 방법에 대해 알게 되었습니다. Plyr을 사용하여 동영상을 플레이하는 웹사이트나 앱의 시각적인 디자인을 개선하고자 한다면, 원하는 테마를 적용해 보세요.

참고 자료

Plyr 공식 웹사이트