가로 세로 비율 유지가 되는 박스(feat. Youtube)

 

이제는 많은 분들이 아시지만 다시 예전의 내용을 정리하게 되면서 내용을 정리해 봅니다. 

요즘은 동영상이나 youtube 영상을 웹에 바로 보여주는 경우가 많습니다. 이럴 때 가로 사이즈가 고정된 사이즈면 상관없지만 다양한 사이즈의 모바일이나 반응형 웹 화면으로 화면을 구성한다면 가로 화면 폭 사이즈에 맞게 해당 세로 값 화면 값을 유동적으로 변경될 수 있도록 해 주어야 화면이 틀어지거나 비율이 이상하게 나오지 않고 정상적인 화면이 유지됩니다. 

 

요즘 영상은 16:9 화면 비율이 일반적이기 때문에 해당 화면을 비례식으로 놓고 계산하면 대략 56.26% 라는 값이 나오게 됩니다. 

비율 값은 어떤 값으로 적용하냐에 따라서 조금은 차이가 있을 수 있습니다. 

 

참고 : 비례식 공식

기본값(100) :  사용할 영상(박스)의 가로 값 =  구하는 값(x) : 사용할 영상(박스)의 세로값

 

 

.movie__wrapper {        
    position: relative;        
    width: 100%;        
    height: 0;        
    overflow: hidden;        
    padding-bottom: 56.26%;
}

.movie__wrapper--content {        
    position: absolute;        
    top: 0;        
    left: 0;        
    width: 100%;        
    height: 100%;
}

 

아래 예제를 참고로 직접 부모 컨테이너 요소의 넓이 값을 바꾸면 하단의 박스 요소가 자동으로 값이 바뀌면서 조절되는 걸 알 수 있습니다.

 

 

감사합니다.