구글 블로그에서 유튜브 영상 반응형으로 만들기

저의 이번 구글 블로그에 적용한 스킨은 LineMag 스킨(무료 버전)입니다.
그런데 이 스킨은 쓰기에 망설여지는 큰 요인이 한 가지 있었습니다.

유튜브 영상이 반응형으로 나오지 않는다

그건 바로 포스트 본문에 유튜브 영상을 넣을 시에 반응형으로 나오지 않는다는 점이었습니다.
블로그에 글을 쓰면서 유튜브 영상을 적지 않게 가져오는 블로거라면 이건 참 신경 쓰이는 일이 아닐 수 없습니다.
유튜브 영상이 반응형으로 나오지 않는다는 것이 무슨 말인지 잘 모르시는 분들에게 설명을 드리자면,

바로 이런 것입니다.
유튜브 영상의 화면 크기가 자동적으로 블로그 포스트 본문의 폭을 꽉 채웠으면 좋겠는데, 작게 나와서 이렇게 유튜브 화면의 오른쪽에 여백이 있는 것입니다.

모바일에서도 마찬가지입니다.
모바일에서는 이상하게 화면이 전체적으로 거의 정사각형에 가까운 모양을 하고 있고, 가로는 가득 찼지만, 세로에 쓸데없이 차지한 검은 부분들이 너무 넓습니다.
LineMag 스킨을 계속 사용하기 위해서 이 문제를 수정해보겠습니다.
참고로 이 방법은 꼭 LineMag 스킨이 아니더라도, 다른 스킨을 사용하면서 똑같은 문제를 겪고 있는 분이라도 써먹을 수 있는 방법입니다.
만에 하나 코드가 꼬여서 작동이 잘 안 된다고 쳐도 HTML과 CSS를 공부하신 분이라면 충분히 응용할 수 있으리라 생각합니다.

웹사이트를 독학으로 만들고 싶다면? 공부 방법과 순서

웹사이트를 독학으로 만들고 싶은 사람들에게 처음에 어떤 언어를 어떤 순서로 배우면 좋은지, 어디서 배울지 있는지를 소개합니다.

HTML과 CSS를 모르지만, 한번 배워보고 싶으신 분들은 이 포스팅을 보면서 순서대로 공부해보시면 좋을 것 같습니다.
티스토리나 구글에서 블로그를 한다면 거의 필수이지 않을까 생각합니다.

HTML 편집에서 추가할 코드

테마의 HTML 편집에 추가할 코드

.post-body .responsive-video-wrap {
    position:relative;
    width:100%;
    padding:0;
    padding-top:56%
}
.post-body .responsive-video-wrap iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}

위의 코드를 복사 버튼을 클릭해서 복사하고, 블로그 관리 메뉴에서 테마 > HTML 편집으로 들어가서 아래 이미지의 위치쯤에 코드를 붙여 넣고 저장합니다.

절대적으로 이 위치여야만 하는 것은 아니지만, 일단 저는 여기에 붙여 넣었습니다.

에디터에서 추가해야 할 코드

포스트 본문에 추가할 코드

<div class="responsive-video-wrap">
    <!-- iframe 태그로 시작하는 유튜브 동영상 퍼가기 소스 코드 들어갈 곳 -->
</div>

조금 귀찮지만, 이제 포스트 본문에 유튜브 영상을 넣을 때마다 이 코드도 추가해야 합니다.
유튜브에서 복사해온 동영상 퍼가기 소스 코드를 클래스명이 responsive-video-wrap인 div 태그로 감싸줘야 하는 것입니다.
유튜브 영상을 반응형으로 만드는 방법에 대해서 검색을 해보니, 유튜브 영상을 넣을 때마다 이것보다 훨씬 더 긴 코드를 쓰는 분들도 있던데.. 그에 비하면 이건 정말 간단한 짧은 코드입니다.
제가 본 것 중에서는 이것보다 짧고 간단한 코드가 없었습니다.

적용한 결과

이것으로 데스크탑에서도, 모바일에서도 유튜브 영상이 완벽하게 반응형으로 나오게 됐습니다. 👍🏻