[javascript] Plyr을 사용하여 동영상 플레이어에 반응형 디자인 적용하기

27 Nov 2023

javascript

Plyr은 HTML5 비디오 플레이어를 생성하고 제어하기 위한 JavaScript 라이브러리입니다. 이번 글에서는 Plyr을 사용하여 동영상 플레이어에 반응형 디자인을 적용하는 방법을 알아보겠습니다.

Plyr 라이브러리 추가하기

먼저, Plyr을 사용하기 위해 해당 라이브러리를 프로젝트에 추가해야 합니다. Plyr은 CDN을 통해 빠르게 내려받을 수 있습니다. 아래의 코드를 HTML 파일의 <head> 태그 안에 추가해주세요.

<link rel="stylesheet" href="https://cdn.plyr.io/3.6.2/plyr.css" />
<script src="https://cdn.plyr.io/3.6.2/plyr.js"></script>

HTML 마크업 작성하기

Plyr을 사용하기 위해 동영상을 포함한 HTML 마크업을 작성해야 합니다. 아래는 간단한 예시입니다.

<video id="player" controls>
  <source src="video.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

JavaScript 코드 작성하기

이제 Plyr을 초기화하고 동영상 플레이어에 반응형 디자인을 적용하는 JavaScript 코드를 작성해보겠습니다. 아래의 코드를 <script> 태그 안에 추가해주세요.

const player = new Plyr('#player', {
  // 옵션 설정
  // 자세한 옵션은 Plyr 공식 문서 참고
});

window.addEventListener('resize', () => {
  player.plyr.reload();
});

위의 코드에서 resize 이벤트가 발생하면 Plyr에게 다시 로드하도록 지시하고 있습니다. 이를 통해 브라우저 크기가 변경될 때마다 동영상 플레이어가 반응형으로 변경될 수 있습니다.

CSS 스타일링 추가하기

마지막으로, Plyr을 통해 생성된 동영상 플레이어에 추가적인 CSS 스타일을 적용하여 반응형 디자인을 완성할 수 있습니다. 아래는 간단한 예시입니다.

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; // 16:9 비율
  height: 0;
}

.video-wrapper video,
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

위의 코드는 동영상 플레이어를 감싸는 .video-wrapper 요소에 16:9 비율의 비디오를 표시하기 위한 CSS 스타일입니다.

결론

이제 Plyr을 사용하여 동영상 플레이어에 반응형 디자인을 적용하는 방법을 알아보았습니다. Plyr은 사용하기 쉽고 다양한 커스터마이징 옵션을 제공하기 때문에 웹 사이트에서 멋진 동영상 플레이어를 구현할 수 있습니다.

더 자세한 내용은 Plyr 공식 문서를 참고해주세요.