요즘 대부분 스킨들이 반응형을 지원하지만 PC에서 유튜브 동영상을 삽입하면 보통 iframe 태그 속성에 사이즈가 지정되어 있어 모바일 환경에서 보면 위아래 폭이 지나치게 크게 나타난다.
이는 블로그 관리 > 스킨 편집 > CSS에 아래 코드를 추가함으로써 어느 환경에서든 알맞은 사이즈로 깔끔한 출력이 가능하다.
.youtubeWrap {position:relative; width:100%; padding-bottom:56.25%;}
.youtubeWrap iframe {position:absolute; width:100%; height:100%;}
위 코드를 저장했다면 아래와 같이 유튜브 기본 소스의 <iframe>과 </iframe>을 <div> 태그로 감싸주면 된다.
<div class="youtubeWrap"><iframe></iframe></div>
글 작성 시 사이즈를 임의로 변경하면 글쓰기 화면에서는 변경한 사이즈로 출력되지만 발행하면 본문 폭에 맞춰서 출력되기 때문에 신경 쓰지 않아도 된다.
참고
• http://zimny327.blog.me/220980020306