[나혼웹] 비디오 삽입

padding-top:에 %를 넣으면 부모요소의 가로 사이즈에 영향을 받는다.

부모 요소의 가로 너비와 같고 세로 사이즈는 가로 너비의 비율로 표현한다.

html

<div class="video">
  <div class="video-ratio"></div>
</div>

css

.video{
  width: 500px;
  border: 4px solid red;
}

.video-ratio{
  height: 0;
  background-color: blue;
  padding-top:56.25%
}

video-ratio에 heigth를 지정하지 않고, padding-top을 이용하는 이유는 반응형 때문이다. 부모 요소의 가로 사이즈가 줄어들면 자식 요소가 같은 비율로 줄어들게 만들게 하기 위해서이다.