내가 지금 첨부한 유튜브 동영상을 봐라. 에디터 페이지 넓이를 100%로 꽉 채움과 동시에 반응형 스킨과 함께 반응형으로 사이즈가 조정된다.
자바스크립트 없이 순수한 CSS 구현만으로 이루어져 있다.
먼저, 적용법부터 말하자면 이 코드를 style.css 하단에 추가하고 플러그인>YouTube 동영상 넣기 (YOUR_BLOG_ID.tistory.com/admin/plugin/#pluginYouTubeSearch)
플러그인을 활성화시킨다. 그런 다음, 글쓰기 페이지에서 플러그인 > YouTube 를 선택하여 동영상을 삽입하는 것 만으로 위와 같은 전체반응형화면의 까리한 유튜브를 얻게 된다.
삽입시 플러그인에서 가로 길이를 조정할 수 있지만 개무시하면 된다. 그냥 아무거나 골라도 100%의 넓이로 적용된다.
티스토리 반응형 Youtube CSS 코드
/*
* 티스토리용 유튜브 반응형 사이징 by @Crisp_Surplus
* 라이센스: 이 주석을 삭제하지 않는 한 자유 (상업/비상업 목적을 포함한 모든 목적 허용)
*/
.tt-youtube-plugin {
position: relative;
padding-bottom: 56.25%; /* 16:9 비율 */
padding-top: 25px;
height: 0;
}
.tt-youtube-plugin iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
주석의 라이센스대로, 주석을 삭제하지 않는 한 어떠한 목적으로 활용하던 자유다.
'기록했다 > 개발' 카테고리의 다른 글
워드프레스 4.3, 크롬 최신 (45) 버전에서 메뉴 깨지는 오류 해결법 (0) | 2015.09.08 |
---|---|
오유 댓글 알리미, oNotify (v.1.0.1) (4) | 2015.06.16 |
CSOU 오늘의유머 크롬 확장 프로그램 V.0.1.1 (0) | 2015.03.16 |
jQuery 에서 하위 iframe 의 element를 선택하여 컨트롤 하는 방법 (0) | 2015.02.09 |