티스토리 반응형 스킨, 스마트폰에서 유튜브 동영상 크기 해결 방법
스마트폰으로 블로그 글을 보다 알게 되었다. 본문에 유튜브 동영상이 있는 글을 보았는데, 스마트폰으로 보기엔 동영상 크기가 너무 크더라.
유튜브 동영상을 소스 코드로 가져오면 보통 크기가 가로 560에 세로 315가 된다. 유튜브 동영상은 소스 코드 상에서크기를 수정하여 사용할 수 있지만, 스마트폰 크기에 맞추면 컴퓨터나 태블릿에서 문제가 발생한다. 가로 세로 너비 높이가 고정된 소스 코드의 숫자를 고쳐서는 천차만별 크기의 모든 화면 크기에 대응할 수 없다.
유튜브 동영상 삽입 시 반응형 스킨처럼 화면 크기에 맞춰 크기가 변하는 방법으로 해결해야 한다. 하지만 소스 짜는 것은 너무 귀찮다. 그래서 구글에서 검색해 보았다. 이미 해결 방법을 올려 놓은 블로그들이 많더라. 그중 깔끔하게 잘 정리되어 있는 것을 가지고 시간 날 때 좀 더 연구한 후 토탈인포 블로그에 적용 시킬 생각이다. 현재 반응형 스킨을 사용하고 있는데, 조만간 웹과 모바일 스킨을 분리해낼 예정이다. 티스토리의 모바일 스킨을 사용하게 되면 이 방법만으로는 문제 해결이 불가능하다.
HTML 소스
<div class="video-container">
<iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div>
CSS 소스
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
위 소스는 유튜브 동영상을 화면 크기에 맞춰 크기를 조절할 수 있는 반응형 유튜브 동영상 소스이다. 자세한 내용은 '반응형 유튜브 동영상 삽입하기 - Responsive YouTube Video' 글을 참고하면 되겠다. 기본적으로 이 소스는 티스토리 블로그의 경우 반응형 스킨을 사용하는 블로그에서만 사용할 수 있다. 웹과 모바일 스킨 모두에서 css 파일을 사용해야 하기 때문이다. 티스토리의 모바일 스킨을 사용하지만 자신의 입맛대로 고쳐 사용하는 능력자들은 예외이다.
댓글