블로거 동영상 크기 글 너비에 맞게 조절하는 법 How to Increase Video Size in Blogger Posts

블로거(Blogger, Blogspot)는 직접 영상을 첨부하거나 유튜브 업로드 후 임베드할 수 있는데요. 보통은 유튜브 영상을 임베드하는 방법을 사용하는데 영상이 3:4 비율로 작게 표시될 겁니다. 사용자가 전체화면으로 놓고 봐도 되지만 보통은 글에 있는 걸 그대로 놓고 보기 때문에 불편할 수 있습니다.

HTML 편집으로 해당 비디오의 태그를 일일이 조절할 수 있긴 하지만 번거로운데요. 이걸 자동으로 조절해주는 코드입니다.

위처럼 표시되던 게 아래처럼 글 너비에 꽉 차게 동영상 비율(16:9)에 맞춰서 표시되게 하는 방법입니다.

블로거에서 테마 > 맞춤설정 옆의 ▼ > HTML 편집으로 들어가주세요.

다음 코드를 찾아주세요. 편집 화면 클릭 후 Ctrl+F를 누르고 입력하면 됩니다.

]]></b:skin>

위 코드가 아니어도 CSS 입력하는 자리 아무 곳에나 입력하시면 됩니다.

그 윗 줄에 다음 코드를 붙여넣습니다.

.BLOG_video_class {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

CSS를 활용하는 방법입니다. 원래 제이쿼리로 하는 방법도 있었는데 aspect-ratio 속성 덕분에 훨씬 간단한 방법으로 할 수 있게 되었습니다. 제이쿼리로 하는 건 약간 편법이긴 했어요.

비록 동영상 비율이 다양할 경우에는 적용이 힘들지만 요즘은 거의 대부분의 영상이 16:9이기 때문에 괜찮을 거예요. 다른 비율의 영상은 글 작성할 때 수동으로 편집해주세요. 영화라면 모를까 일반 동영상을 보기엔 딱 편안한 비율이라서 특별한 경우가 아닌 이상 옆으로 더 길어지는 일은 없지 않을까요?