티스토리 블로그 유튜브 동영상 반응형으로 삽입하기
요즘 대부분 스킨들이 반응형을 지원하지만 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>
글 작성 시 사이즈를 임의로 변경하면 글쓰기 화면에서는 변경한 사이즈로 출력되지만 발행하면 본문 폭에 맞춰서 출력되기 때문에 신경 쓰지 않아도 된다.
블로그의 정보
uulog
chaz.uu