[Blogger] 구글 블로거의 유튜브 동영상 크기를 조절해보자 feat. CSS

구글 블로거를 이용하면서 포스트에 유튜브 동영상을 포스팅 하면, 그 모양새가 참 별로라는 것을 사용 해본 사람들은 알 것이다.

이를 해결 하기 위해 CSS로 조금 만져 봤는데 노답.

그래서 구글링을 좀 해봤더니 역시나 능력자들이 다 해결해 두었다.

일단 아래 링크의 글을 참고 하시라.

#링크: Responsive Youtube Embed

위 글에서 제시하는 방법은 간단하다.

embed 나 iframe 으로 제공 되는 유튜브 동영상을 div 로 한번 감싸고, div 의 width 를 100%로, height 은 0, padding-bottom 을 50~60% 정도로 설정해 대략적인 틀을 만들어 준다음에, 그 안에 포함된 유튜브 iframe, object, embed 등의 width 를 100%로, height 을 100% 설정 해주는 것이다.

여기서 유튜브 동영상을 감싸는 div 의 position 을 relative로, 유튜브 동영상의 position 은 absolute 에 top: 0, left: 0 으로 설정 해준다.

말로 하니 좀 어려운데 실제로 지금 이 블로그에 사용 되는 코드를 보면 아래와 같다.

.post-body .separator {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.post-body .separator iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

여기서 separator 가 유튜브 동영상을 감싸는 div 이며, iframe 이 유튜브 동영상이다.

예전에는 어땠는지 모르겠는데, 블로거에서 유튜브 동영상을 삽입하면 자동으로 separator 라는 클래스의 div 로 감싸지므로 위와 같이 설정 해두면 자연스럽게 화면 크기에 따라 유튜브 동영상의 크기가 변해진다. 일명 Responsive.

해외 능력자분 감사.

근데 구글은 Blogger 서비스에 좀더 투자좀 했으면 좋겠다. 몇 년 전에 비해 눈에 띄게 나아지는게 하나도 없네.