티스토리 반응형 스킨에 동영상 사이즈 자동 조절 CSS

영상 반응형 자동 조절

티스토리 를 이용하시는 분들이 부쩍 많이 늘어났다고 생각하는 요즘 제가 이용하는 팁(Tip) 중에 제일 만족했던 부분을 공유하려 합니다. 바로 반응형 스킨을 이용하시는 분들 중 영상 프레임을 소스로 가지고 왔는데 PC에서 보는 것과 모바일에서 보는 것과 차이가 있다는 것을 느껴지는 분들은 이렇게 하시면 PC 나 모바일 또는 태블릿에서 보기 좋은 사이즈로 자동조절되는 것을 확인하실 수 있습니다.

CSS 코드

일단 동영상 자동조절 CSS 코드입니다. 복사 붙여 넣기 하세요

.divmovie { position:relative; width:100%; padding-bottom:56.25%; }  
.divmovie iframe {position:absolute; width:100%; height:100%;}

Html 코드

Html 소스입니다. 글 작성 하실 때 사용하시면 되겠습니다.

<div class="divmovie">
<iframe src="URL" frameborder="0" allowfullscreen="true"></iframe>
</div>

이렇게 적용하시고 나면 width='가로' height='세로'를 지정하지 않아도 동영상 화면의 크기가 자동으로 조절됩니다. (자신의 블로그 사이즈에 맞는 영상으로 노출됩니다)

다른 분들에게 도움 되는 글이었으면 합니다.