티스토리 뷰
유튜브 동영상을 반응형 웹 디자인이나 티스토리 반응형 웹 스킨에 삽입하는 방법은 여러가지 방법이 있습니다.
우선 첫번째로 css에 추가해서 div 태그로 유튜브 동영상 코드를 감싸서 넣는 방법이 있는데요.
이 방법은 그동안 이미 썼던 글을 모두 수정해야 하는 불편함이 있죠.
그래도 이 불편한 방법에 대해서 말씀드리자면..head에 다음을 추가합니다. ( 이 방법은 사용하지 마세요 )
<style> .youtube { position: relative; width: 100%; padding-bottom: 56.25%; } .youtube iframe { position: absolute; width: 100%; height: 100%; } </style>
그리고 글을 쓸때 아래와 같이 html 편집모드에서 div 태그로 감싸고 글을 쓰면, 반응형으로 동영상이 컨텐츠 width 폭에 따라 유튜브 동영상도 크기가 변경됩니다.
<div class="youtube"><iframe width="854" height="480" src="https://www.youtube.com/embed/a4IosLAbLXY" frameborder="0" allowfullscreen=""></iframe></div>
그러나 이같은 방법은 앞에서 말씀드린것과 같이 그동안 썼던 글을 모두 수정해야 하는 불편함이 있습니다.
이미 쓴 글이 많다면 거의 불가능에 가깝죠.
그러나 아래와 같이 하면, 자바스크립트(javascript jQuery) 몇 줄 추가로 이미 쓴글이나 앞으로 쓸 글 모두 반응형 유튜브 동영상으로 볼 수 있습니다.
자, 이제 이 간단하고 편리한 방법을 알아 봅시다. </head> 태그 앞에 아래와 같이 추가합니다.
<script type="text/javascript"> $(window).resize(function(){resizeYoutube();}); $(function(){resizeYoutube();}); function resizeYoutube(){ $("iframe").each(function(){ if( /^https?:\/\/www.youtube.com\/embed\//g.test($(this).attr("src")) ){ $(this).css("width","100%"); $(this).css("height",Math.ceil( parseInt($(this).css("width")) * 480 / 854 ) + "px");} }); } </script>
그리고 글을 쓸때 아래와 같이 html 편집모드에서 유튜브 동영상 소스코드를 삽입만 하면 됩니다. 아래와 같이 말이죠.
<iframe width="854" height="480" src="https://www.youtube.com/embed/a4IosLAbLXY" frameborder="0" allowfullscreen=""></iframe>
그러면 자동으로 반응형 유튜브 동영상이 삽입됩니다.
티스토리 반응형 스킨을 사용하는 블로그라면 관리 -> 꾸미기 -> HTML/CSS 편집 -> HTML 탭에서 </head>태그앞에 위 코드를 삽입하면 됩니다. 아래와 같이 말이죠.
유튜브 동영상에서 마우스 오른쪽 클릭한 다음에 [소스 코드 복사]를 선택하면 소스 코드가 복사가 됩니다.
그리고, 유튜브를 삽입할 위치에서 html 편집모드로 아래와 같이 붙여넣으면 반응형 유튜브 동영상이 삽입됩니다.
그럼 적용된 유튜브 동영상이 삽입된 글이 크기에 따라 반응형 유튜브 동영상으로 적용되는지 아래 스크린샷을 보시죠.
아래 예로 동영상을 삽입해 보겠습니다.
브라우져 크기에 따라 유튜브 동영상의 크기가 변경되죠?
잘 안되신다면 댓글 남겨주세요.
공감은 글 올리는데 큰 힘이 됩니다. ^^
행복한 하루 되세요 ^^
'IT > 블로그,티스토리' 카테고리의 다른 글
티스토리 반응형 웹스킨 #1 수정된 토마토 스킨 공유합니다. (40) | 2016.05.05 |
---|---|
티스토리 반응형 웹스킨 #1 하단 copyright 수정 (12) | 2016.05.02 |
티스토리 반응형 웹스킨 #1 본문 폭 수정 가이드 (4) | 2016.04.28 |
티스토리 반응형 웹스킨 #1 카테고리 메뉴 바 수정 가이드 (10) | 2016.04.25 |
카테고리의 다른 글 목록에 이전, 다음 버튼(페이징) 만들기 (2) | 2016.04.23 |
유튜브 동영상 반응형 웹에 삽입하는 방법 (13) | 2016.04.18 |
티스토리 블로그 모든 본문 중간에 글 수정없이 구글 애드센스 반응형 링크 광고 달기 (50) | 2016.04.03 |
티스토리 최신글(최근에 올라온 글) 본문에 추가하기 (27) | 2016.04.02 |
티스토리 반응형 스킨에 PC버전 보기, 모바일버전 보기 버튼 만들기 (4) | 2016.03.24 |
티스토리 블로그에 탑(Top) 버튼 넣는 방법 (15) | 2016.03.23 |
티스토리 반응형 스킨에 구글 애드센스(google adsense) 반응형 배너 적용 방법 (50) | 2016.03.21 |
- 어흥!!! 이거 은근 신경 쓰였는데 덕분에 편하게 해결했네요. 감사합니다. ^^ 2016.05.22 17:54 신고
- 토마토.. 감사합니다. 좋은 하루 되세요 ^^ 2016.06.18 08:00 신고
-
아빈느블랑
동영상을 수정할때 이미 게재되어 있던 글들도 다 수정을 하려면
iframe 소스 부분을 서식으로 저장해놓고 글에 불러 와서 써야 하나요?
아니면 위의 글들 처럼 글마다 iframe 소스만 넣으면 될까요? 2016.06.17 17:27 신고 - 토마토.. 별도로 동영상 소스 수정하실 필요가 없으시고, 위 스크립트만 삽입하면 기존에 썼던 글도 다 적용되며, 앞으로 글을 쓸때도 변경없이 동영상 소스 그대로 삽입하면 됩니다. ^^ 2016.06.18 07:59 신고
- 짐농 한방 스크립트 덕분에 유튜브 가변폭 편하게 해결했습니다. 감사드려요. 2016.08.11 13:16 신고
- 로샤 반응형 웹사이트 만들어보고 있는데 도움이 됐네요 감사합니다. 2016.11.15 16:15
- 한설날 감사합니다, 덕분에 예쁘게 적용했어요~ 2017.01.02 12:34 신고
-
굳굳굳
드디어 원하는 자료를 찾았습니다.
감사합니다 2017.11.23 14:36 -
huk
진짜 정말 감사합니다 제가 반나절을 이거 해결하려고 돌아다녔는데
올려주신 스크립트 넣으니 예쁘게 사이즈조절이 되네요. 너무 쉽게 되서 눈물이 날 지경이네요.
다가오는 새해 복 많이 받으시길...ㅠㅠㅠㅠ 2017.12.29 20:10 신고 - AJ WORKS </head> 앞이 아니라 뒤 아닌가요... 2018.02.04 16:10 신고
- 데포소 Deposo 제일 정확하고 명확한 방법이네요. 감사합니다. 저도 앞인지 뒤인지 헷갈렸는데 앞으로 했는데도 되긴됩니다. 2020.07.08 13:03 신고
- ehrtk34@naver.com 정말 감사합니다. 굿굿입니다. 2020.11.09 09:14
-
유달네
이것 때문에 엄청 애먹었는데 해결했습니다
감사합니다 2020.12.24 11:22 신고
- Total
- 922,109
- Today
- 182
- Yesterday
- 308
- 타이어 드레싱
- 티스토리 반응형 스킨
- 퓨리스 A34
- 셀프세차
- 티스토리 새 반응형 웹스킨 #1
- 세차
- 포스타 upp
- 자동차 디테일링
- 해운대
- 블로그
- TDG 블루베리 휠클리너
- 타이어 광택제 비교
- 티스토리 반응형 스킨 #1
- 퓨리스 타이어 광택제
- 티스토리
- 디테일링
- 데피니티브 율리시스
- 타이어 광택제
- 티스토리 스킨
- 퓨리스 A34 왁스