웹 페이지에 삽입한 동영상이 모바일, 태블릿, 데스크톱 등 다양한 화면 크기에서 자연스럽게 표시되도록 하려면 max-width 속성을 활용하는 것이 가장 간단하고 효과적인 방법입니다.
핵심 원리
비디오 요소에 max-width: 100%를 지정하면 동영상의 너비가 부모 컨테이너보다 커지지 않고, 화면이 좁아질 때 자동으로 줄어듭니다. 여기에 height: auto를 함께 설정하면 가로세로 비율이 유지된 채로 크기가 조절되므로 영상이 찌그러지거나 잘리는 문제를 방지할 수 있습니다.
예제 코드
아래 예제를 실행하고 브라우저 창 크기를 조절해 보면, 비디오 플레이어가 화면 너비에 맞춰 반응형으로 동작하는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<style>
video {
max-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>코드 설명
- <meta name="viewport">: 모바일 기기에서 페이지가 실제 기기 너비에 맞게 렌더링되도록 설정합니다. 반응형 웹 구현 시 필수 요소입니다.
- max-width: 100%: 비디오가 부모 요소의 너비를 초과하지 않도록 제한합니다.
- height: auto: 너비가 변할 때 높이도 원본 비율에 맞춰 자동 조절됩니다.
- <source> 태그 2개: ogg와 mp4 형식을 순서대로 제공하여, 브라우저가 지원하는 첫 번째 형식을 재생합니다.
이처럼 몇 줄의 CSS만으로 복잡한 미디어 쿼리 없이도 비디오 플레이어를 어떤 기기에서든 깔끔하게 표시할 수 있습니다.