반응형 유튜브 동영상 삽입하기 - Responsive YouTube Video

Responsive  YouTube Video & Object

유튜브와 같은 미디어는 고정된 높이와 너비를 제어하여 추가하기 때문에 브라우저 크기나 장치의 폭에 따라 크기를 조정할 필요가 있을 경우 문제가 될 수 있습니다.

다시 말해, 반응형 웹에서 일반적인 유튜브 소스코드를 추가할 시에 모바일,태블릿,스크트톱에서 원치않는 사항에 직면하게 될 것입니다.

이렇듯 반응형 웹에서 유튜브 동영상과 같은 미디어를 다루는 방법에 대해 간단히 알아봅니다.

일반적인 마크업 구조

유튜브 동영상을 삽입시에 다음과 같은 마크업을 할 수 있습니다.

html

<div class="video-container">
    <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div>

위와 같이 유튜브 소스를 아이프레임으로 삽입시에 아이프레임을 감싸주는 부모 컨테이너와 같은 요소가 필요합니다.

CSS 구성

css

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; 
    height: 0; 
    overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

위 스타일중 padding-bottom: 56.25% 는 비율에 따라 작성한 것입니다.

예를 들어, 가장 일반적인 화면비율 16 : 9 를 많이 사용한다고 보았을 때 (9/16) * 100% = 56.25% 가 될 것입니다.

그리고 미디어 요소를 감싼 컨테이너 요소에 높이값(height: 0)을 주지 않고 padding-bottom을 이용하여 높이값을 설정하게 됩니다.

다음으로 미디어 요소에 절대 위치값을 설정하여 감싼 부모요소에 가득차도록 속성값들을 지정해 줍니다.

혹시 화면 비율이 조금 맞지 않는다거나 각 디자인 상황에 적합하도록 미디어의 부모 요소에 padding-top을 이용하여 추가해 줄 수 있습니다. 

즉, 높이값의 미세한 조정은 padding-top 을 이용할 수 있습니다.

여기서 화면 비율을 16 : 9로 정하였으나 4:3, 2:1 등 디자인 상황에 적합한 비율로 percentage(%)를 계산하면 될 것입니다.

위 코드에서는 padding-bottom으로 높이값을 지정했으나 높이값을 반대로 padding-top으로 지정해도 결과는 마찬가지이다.

대신 높이값을 padding-top, padding-bottom 값중에 하나를 선택하여 지정했다면 높이값의 미세한 조정은 그 반대가 되어야 할 것이다.

Jaehee's WebClub