유튜브 모바일 반응형 CSS 적용방법 및 과정

유튜브 모바일 반응형

이미지보다는 글로 설명해도 충분할 것 같고 각 사이트마다 적용방법이나 코드가 조금씩 다를 수 있으므로, 수시로 개발자 도구를 활용해서 점차 수정해나갈 것을 권장합니다.

유튜브 웹소스를 가져와서 적용시키거나 HTML편집기를 통해서 유튜브 영상을 노출시키고자 할 때, PC버전에서는 정상적으로 작동하지만 모바일에서는 레이아웃이 깨지는 경우가 많습니다. 이를 통해서 컨테이너 또는 블록(DIV)을 만들고 그 공간에 아래와 같은 소스를 적용시켜서 모바일 사이즈를 조절할 수 있었습니다.

.video-container {
    text-align: center; 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 300px; 
    height: 0; 
    overflow: hidden; 
    margin: 10px 10px 30px 10px;
}

코드는 컴퓨터에게 일종의 명령을 하는 명령어입니다. 그래서 각 코드마다 해석이 가능합니다. 위의 블럭요소를 .video-container 라고 한다면 이 블록에 위와 같이 소스를 적용합니다. text-align는 가운데 정렬을 명령하고, position은 위치에 대한 명령입니다. 다른 요소들과 겹치지 않게 상대적인 위치를 지정하는 relative;를 선언합니다.

그리고 유튜브 프레임의 사이즈를 조절하는 방법은 높이를 고정시키고 padding-bottom으로 전체적인 프레임의 사이즈 비율을 깨주면서 자동으로 전체 프레임의 비율을 모바일에 맞게 조절해주는 방식입니다. 16:9 비율로 일반적인 비율은 위와 같이 padding-bottom: 56.25%;로 선언할 수 있습니다. padding-top은 높이를 담당하기 때문에 전체적인 높이(세로 사이즈)를 조절하는 방식으로 적용시킬 수 있었습니다.

꼭 height: 0;으로 선언해서 세로 사이즈가 가변적인 형태로 설정될 수 있게 적용을 해주고, 나머지 넘치는 부분은 overflow: hidden;으로 조절해줄 수 있었습니다. 이외의 여백 등의 요소는 입맛에 맞게 추가해주면 됩니다.

제가 이번에 적용했던 유튜브 동영상은 iframe 방식이 아니라 Object 방식으로 구현했습니다. 그래서 위의 컨테이너와 함께 직접적으로 동영상 소스에 적용될 코드로 아래와 같이 적용했습니다.

.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

컨테이너 자식요소에 적용되는 부분으로 embed 요소에 바로 적용했습니다. 유튜브는 일반적으로 embed 형식으로 스크립트나 소스를 불러올 수 있었습니다. top과 left로 상단 좌표와 좌우 좌표를 고정시켜주고, 부모 요소에 상대적인 위치를 설정해주면 블록 안에 자연스럽게 적용이 됩니다. 그다음에 컨테이너에 맞게 높이와 세로사이즈가 자동으로 조절이 될 것입니다. 이렇게 해서 반응형으로 구축할 수 있었습니다.

따로 코딩을 배운 적이 없어서 명령어나 기타 요소들의 정의가 헷갈리실 수도 있지만, 원리만 알면 모바일 버전에서도 유튜브 레이아웃이 깨지지 않고 딱 알맞게 노출되도록 구성하실 수 있으실 겁니다.