문제 상황
iPad(iOS 6)의 Safari 브라우저에서는 HTML5 비디오가 페이지 너비의 100%를 채우도록 자동으로 크기가 조절되지 않는 문제가 발생합니다. 이로 인해 반응형 웹 디자인에서 비디오가 의도한 크기로 표시되지 않아 레이아웃이 깨지거나 여백이 생기는 경우가 많습니다.
해결 방법: 반응형 패딩(Responsive Padding) 기법
이 문제를 해결하려면 반응형 패딩 기법을 활용하는 것이 효과적입니다. 핵심 원리는 padding-top 값을 백분율로 지정하면, 그 값이 요소의 너비를 기준으로 계산된다는 점을 이용하는 것입니다.
예를 들어 padding-top: 56.25%를 적용하면 16:9 비율(9 ÷ 16 = 0.5625)의 영역이 만들어집니다. 이 방식은 비디오뿐만 아니라 iframe 등 다른 임베드 요소에도 동일하게 적용할 수 있습니다.
적용 CSS 코드
먼저 비디오를 감싸는 컨테이너에 비율을 유지하는 패딩을 설정합니다.
#video-box {
padding-top: 56.25%;
position: relative;
}그다음, 비디오 요소를 컨테이너 안에서 절대 위치로 배치하여 전체 영역을 채우도록 만듭니다.
video, object {
width: 100%;
height: 100%;
top: 0;
display: block;
position: absolute;
}동작 원리 정리
- #video-box:
padding-top으로 16:9 비율의 공간을 확보하고,position: relative로 내부 요소의 기준점 역할을 합니다. - video, object:
position: absolute와 함께 너비·높이를 100%로 지정해 컨테이너 영역 전체를 꽉 채웁니다.
이렇게 하면 Safari를 포함한 다양한 브라우저 환경에서도 비디오가 화면 너비에 맞춰 일관된 비율로 표시되어, iPad 구버전에서 발생하는 크기 조정 문제를 안정적으로 해결할 수 있습니다.