[CSS] 동영상 배경 설정하기

메인페이지 리뉴얼 작업을 하는데, 3개 섹션의 배경을 동영상으로 삽입해야 했다.

서버에 비메오에 업로드하고 iframe으로 불러와 사용하는 방식으로 작업한다.
position을 사용해서 작성했는데, 여백이 생기고 난리!

 

💡 목표

다양한 장치의 화면 비율에 맞추어 꽉 차는 배경 동영상 설정하기

 

📌 HTML

<section class="videoSection">
	<!-- 텍스트 영역 -->
    <div class="txtWrap">
        <p>텍스트</p>
    </div>
    <!-- 배경 비디오 -->
    <div class="videoWrap">
        <iframe id="iframe" src="비메오링크?badge=0&autoplay=1&loop=1&title=0&autopause=0&muted=1&controls=0" width="100%" height="100%" frameborder="0"></iframe>
    </div>
</section>

 

📌 CSS

.videoSection { position: relative; background: #000; }
.videoSection .txtWrap { position: absolute; top: 50%; left: 100px; transform: translateY(-50%); z-index: 1; color: #fff; }
.videoSection .videoWrap { position: relative; width: 100%; height: 0; padding-top: 44.5%; overflow: hidden; }
.videoSection .videoWrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

 

여기서 중요한 부분은 .videoSection .videoWrap 요소의 padding-top 이다.
화면 크기에 맞춰 자동으로 동영상 비율이 조절되므로, 다양한 장치에서도 비율이 유지된다.

일반적인 16:9 비율의 동영상(1920*1080) 크기는 padding-top: 56.25%가 된다.
하지만 이번에 전달받은 영상의 크기가 1920*855 이므로 padding-top을 조절했다.

비율 = 높이 / 너비 = 1920 / 855 = 0.4453

구해진 비율을 퍼센트로 변환(x100)하여 padding-top: 44.5% 으로 설정해주면
어떤 장치에서도 비율이 유지되는 동영상 배경 설정 끝~

 

Html 아이콘 제작자: Freepik - Flaticon
Css 아이콘 제작자: Freepik - Flaticon
자바 스크립트 아이콘 제작자: Rmpp - Flaticon

11,072종의 무료 html 아이콘