유투브 영상 반응형으로 올리기

출처: http://www.clien.net/cs2/bbs/board.php?bo_table=useful&wr_id=243108

티스토리에 반응형 스킨을 적용할 경우 한가지 문제점이 발생하는데,
HTML로 유투브 영상을 글에 삽입하는 경우 너비와 높이가 고정되어 있어, 가로폭이 좁은 모바일 기기에서 영상이 잘려 나오게 됩니다.

이를 해결하는 방법

http://embedresponsively.com
"Embed Responsively"라는 사이트를 이용해 아주 간단하게 해결할 수 있습니다.
사이트를 방문해 글에 넣으려는 영상의 링크를 입력한 뒤 'Embed'를 클릭하면 반응형 유투브 임베드 코드가 생성되고, 이 코드를 글에 삽입하면 됩니다.

유투브 뿐만 아니라 Vimeo, Dailymotion 등 여러가지 사이트를 지원하는데요.
반응형 스킨을 사용하시는 분들께 꽤 유용할 것 같습니다.

=============추가

티스토리처럼 css의 수정이 가능하고 자신의 블로그에 영상을 자주 올린다면 다음과 같은 방법으로 하는 것이 더 편리할 것 같습니다.

1. CSS에 다음 코드 추가

.videowrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25% !important;
padding-top: 25px !important;
height: 0;
}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


2. 유튜브 영상 삽입시에는 다음처럼 삽입

<div class="videowrapper">
<iframe width="640" height="360" src="//www.youtube.com/embed/4L-H_cXSNhQ?rel=0" frameborder="0" allowfullscreen></iframe>
</div>


만약에 embed 태그로 삽입하려면 처음 css을 다음과 같이 바꿔주면 됩니다.

.videowrapper iframe, .videowrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}