구글 블로그에서 유튜브 영상 반응형으로 만드는 방법

지난 포스트에서 처음으로 유튜브 영상을 퍼와서 삽입해 봤다.

그런데 유튜브 영상이 다음과 같이 이상하게 표시됐다.

이 캡처 이미지처럼 포스트 본문에 유튜브 영상을 넣으면 반응형으로 나오지 않고 있었다.

블로그에 글을 쓰면서 유튜브 영상을 자주 가져오는 블로거라면 이건 참 신경 쓰이는 일이 아닐 수 없다.

유튜브 영상이 반응형으로 나오지 않는다는 것이 무슨 말인지 잘 모르시는 분들에게 설명을 드리자면,

유튜브 영상의 화면 크기가 자동적으로 블로그 포스트 본문의 폭을 가득 채워야 보기 좋은데, 이 이미지처럼 작게 나와서 플레이어에 여백이 있는 것이다.

모바일 화면에서도 마찬가지다.

모바일 화면에서는 유튜브 플레이어가 가로 폭은 가득 찼지만, 세로에 쓸데없이 차지한 검은 부분들이 있어서 보기에 예쁘지 않다.

이제 이 문제를 해결해 보도록 하자.

HTML 편집에서 추가할 코드

.post-body .youtube-player {
    position:relative;
    width:100%;
    padding-top:56.25%
}
.post-body .youtube-player iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}

위의 코드를 블로그 HTML 편집으로 들어가서 추가한다.

코드를 최대한 짧게 만들고 싶다면, .post-body를 빼도 좋다.

그런데 혹시라도 .post-body를 뺐더니 유튜브 플레이어가 반응형이 되지 않는다면 다시 넣도록 하자.

그런데 놀랍게도 현재 내가 사용하고 있는 Amalia 템플릿은 처음부터 이와 관련된 CSS 코드가 존재한다.

이런 코드가 없는 템플릿들도 많으니, 없을 경우에는 직접 추가하도록 하자.

참고로 나는 여기서 margin 값을 수정했다.

플레이어의 크기가 작아지지 않도록 좌우에는 margin을 0으로 하고, 상하에만 5px을 넣었다.

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

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

이제 포스트 본문에 유튜브 영상을 넣을 때마다 이 코드도 추가해야 한다.

유튜브에서 복사해온 동영상 퍼가기 소스 코드를 클래스명이 youtube-player인 <div> 태그로 감싸줘야 하는 것이다.

매번 영상을 넣을 때마다 이 코드를 넣어야 하니 귀찮게 느껴질 수도 있다.

그런데 유튜브 영상을 반응형으로 만드는 방법에 대해서 검색을 해보니, 유튜브 영상을 넣을 때마다 이것보다 훨씬 더 긴 코드를 쓰는 분들도 있던데.. 그에 비하면 이건 정말 간단한 짧은 코드다.

반응형 유튜브 플레이어

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

구글 블로그에서 유튜브 영상을 삽입하는 가장 효율적인 방법

구글 블로그에 유튜브 영상을 가장 효율적으로 삽입하는 방법을 알려드립니다. 지연 로딩(Lazy Loading) 기술을 활용해 블로그 로딩 속도를 높이고, 플레이어 디자인을 바꾸는 법과 영상 시작 시간을 설정하는 팁을 담았습니다.

그런데 아까 전의 CSS 코드가 이미 블로그에 있었던 사람은 이 포스트도 반드시 확인하도록 하자.

확인하지 않으면 손해인 내용이 들어있다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.