본문 바로가기

기록했다/개발

티스토리 활용법 #1 유튜브를 반응형으로 넣어보자


내가 지금 첨부한 유튜브 동영상을 봐라. 에디터 페이지 넓이를 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;

}


주석의 라이센스대로, 주석을 삭제하지 않는 한 어떠한 목적으로 활용하던 자유다.