동영상 플레이어를 반응형으로 만들려면 CSS의 width 속성을 사용해 값을 100%로 설정하면 됩니다. 이렇게 하면 동영상이 브라우저 창의 너비에 맞춰 자동으로 크기가 조절되며, height 속성을 auto로 함께 지정하면 원본의 가로세로 비율도 그대로 유지됩니다.
예제
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<style>
video {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<video width = "300" controls autoplay>
<source src = "/html5/foo.ogg" type = "video/ogg" />
<source src = "/html5/foo.mp4" type = "video/mp4" />
</video>
<p>효과를 확인하려면 브라우저 창 크기를 조절해 보세요.</p>
</body>
</html>동작 원리
위 예제에서 <video> 태그에는 초기 너비로 300px가 지정되어 있지만, CSS 스타일시트의 width: 100% 규칙이 이를 덮어쓰기 때문에 동영상은 항상 부모 요소의 전체 너비를 차지합니다. 브라우저 창의 크기를 줄이거나 늘리면 동영상 플레이어도 실시간으로 함께 크기가 변하는 것을 확인할 수 있습니다.
추가 팁
큰 모니터에서 동영상이 지나치게 커지는 것을 방지하고 싶다면 max-width 속성을 함께 사용하는 것이 좋습니다. 예를 들어 max-width: 800px;를 추가하면 동영상은 최대 800px까지만 확대되고, 그 이하의 화면에서는 여전히 100% 너비로 반응형으로 동작합니다.