티스토리 모바일 웹페이지에 동영상 화면 크기 자동 맞추기

유투브나 기타 다른 동영상을 티스토리 모바일 웹페이지에서 보면 화면이 짤리거나 너무 크게 나와서 전체 스킨 구조가 엉망이 되거나 하는 것을 볼 수 있습니다.

이럴때 참 난감한데요.

이럴 경우 반응형 스타일 코드를 넣으면 이 문제를 해결할 수 있습니다.


<style>
.mobie_youtube {position:relative; padding-bottom:56.25%; padding-top:30px; overflow:hidden; max-width:100%; height:auto;}
.mobie_youtube iframe, .mobie_youtube object, .mobie_youtube embed {position:absolute; top:0; left:0; width:100%; height:100%;}
</style>


위와 같은 방식으로 동영상이 삽입된 모바일 페이지에 코드를 넣으면 됩니다.

단, 동영상은 <div class="mobie_youtube">동영상</div> 형태로 감싸주시는 것 잊지마시구요.