HTML 비디오 반응형 설정: CSS로 화면에 딱 맞게 배치하기

 

안녕하세요 찐망고 입니다.

 

히어로 섹션에 동영상을 삽입하는 건 이젠 기업 웹사이트의 트렌드가 되었잖아요?

그만큼 동영상은 웹사이트의 첫인상을 좌우하는 중요한 요소가 되었습니다.

 

그래서 제가 관련 포스팅도 몇 개 했었죠?

iOS 에서 동영상 재생이 안되나요?

 

youtube iframe 연결하여 자동 재생하기

 

반응형 디자인에서는 다양한 화면 크기에 맞춰 콘텐츠가 유연하게 변해야 하죠.

동영상도 마찬가지입니다.

특히 가로가 긴 영상과 세로가 긴 영상 두 가지를 준비해 각기 다른 뷰포트에 최적화하는 것도 좋은 방법이에요.

하지만 영상은 하나뿐이고 반응형으로 작업을 해야 한다면,

영상 자체를 중앙에 배치되게 작업하는 걸 추천합니다.

바깥쪽 부분이 잘릴 테니 영상 셀렉도 잘해야겠죠?

 

HTML코드

<div class="video-container">
    <video loop autoplay muted playsinline poster="">
    	<source src="경로" type="video/mp4">
    </video>
</div>

 

CSS코드

.video-container {
    position: relative;
    width: 100%;
    height: 52vw;
    overflow: hidden;
}

video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}

/* 모바일에서 최소 높이 적용 */
@media (max-width: 768px) {
    .video-container {
        min-height: 400px; /* 최소 높이를 400px로 설정 */
        height: 100vw; 
    }
}

 

코드 설명:

• video-container는 동영상이 담기는 컨테이너로, 반응형으로 동영상이 비율에 맞게 잘리도록 설정합니다.
• video 태그 내부의 속성들은 동영상을 중앙에 정렬하고, 비율에 맞춰 잘리게끔 설정해 줍니다.
  object-fit: cover; 속성은 동영상이 컨테이너를 가득 채우면서도 비율이 유지되도록 도와줍니다.
• 미디어 쿼리를 사용해 모바일에서는 최소 높이를 400px로 설정해, 작은 화면에서도 적절한 크기의 동영상이 표시되도록 했습니다.