반응형 블로그 동영상 자동 크기 조절 방법
반응형 블로그에서 유튜브 등의 사이트에서 링크가 아닌 바로 시청이 가능한 소스를 가져올 때 동영상 크기가 맞지 안아 본문 범위를 벗어나 잘리거나 다른 영역을 침법 하는 경우가 있는데 유동적인 넓이에 따라 동영상의 사이즈도 같이 가로, 세로 조절되게 하는 제가 아는 두가지 방법입니다.
<iframe width="853" height="480" src="https://www.youtube.com/embed/N4PUaKhcB_k" frameborder="0" allowfullscreen=""></iframe>
예전에 외국 어느 사이트에서 퍼온 방식으로 작성중인 글에 동영상을 삽일 할때 동영상 소스를 <div class="video"> 동영상 코드 </div> 태그로 감싸줍니다.
.video {
position: relative;
padding-bottom: 56.25%;
height:0;
overflow:hidden;
}
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
}
스킨편집에서 css에 위 속성을 추가 해줍니다. 가로 100% 세로 16:9 비율의 div 태그안에서 동영상은 가로,세로 100% 가 되어 가로 폭이 줄어 들면 세로는 비율로 같이 줄어 들게 됩니다.
<script type="text/javascript">
$(document).ready(function() {
var $allVideos = $("iframe[src^='//player.vimeo.com'], iframe[src^='//www.youtube.com'], object, embed, iframe[src^='https://www.youtube.com'], iframe[src^='https://www.youtube.com'], iframe[src^='http://videofarm.daum.net'], iframe[src^='https://videofarm.daum.net'], iframe[src^='//videofarm.daum.net']"),
$fluidEl = $(".entry");
$allVideos.each(function() {
$(this)
.attr('data-aspectRatio', this.height / this.width)
.removeAttr('height')
.removeAttr('width');
});
$(window).resize(function() {
var newWidth = $fluidEl.width();
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.attr('data-aspectRatio'));
});
}).resize();
});
HTML에 적용하는 방식으로 티스토리 반응형 #2 추출한 내용입니다. 스크립트 추가만 해놓으면 별도의 div 태그 등이 필요 없이 동영상 소스만 적용해도 폭에 맞춰집니다. 이미 jquery를 불러왔다면 <script src="https://t1.daumcdn.net/tistory_admin/lib/jquery-2.1.4.min.js"></script> 부분은 불필요합니다.
$fluidEl = $(".entry"); 부분의 ".entry" 는 자신의 본문 부분의 클래스 명을 적어 주셔야 합니다.
<head>.......</head> 사이 또는 </body>위에 위치하면 됩니다.
<div id="container"> <div id="header"> <h1>01. 블로그 제목</h1> <div class="menu">02. 블로그 메뉴</div> </div> <!-- header close --> <div id="content"> <div class="searchList">11. 검색 결과 리스트</div> <div class="searchRplist">12. 검색 결과 댓글 리스트</div> <div class="locallog">13. 위치 로그</div> <div class="taglog">14. 태그 클라우드</div> <div class="guestbook">15. 방명록 <div class="guestWrite">15-1. 방명록 글쓰기</div> <div class="guestList">15-2. 방명록 리스트</div> </div><!-- guestbook close --> <div class="entryNotice">16. 공지사항 글</div> <div class="entryProtected">17. 보호 글</div> <div class="entry">18. 글 <div class="titleWrap">18-1. 글 제목 | 카테고리 | 작성일 | 글 관리</div> <div class="article">18-2. 글</div> <div class="tagTrail">18-3. 글 관련 태그</div> <div class="actionTrail">18-4. 트랙백 | 댓글</div> <div class="trackback">18-5. 트랙백</div> <div class="code_comment">18-6. 댓글 <div class="code_commentList">18-6-1. 댓글 리스트</div> <div class="code_commentWrite">18-6-2. 댓글 쓰기</div> </div> </div><!-- entry close --> <div class="entry">19. 페이지</div> </div> <!-- content close --> <div id="sidebar"> </div> <!-- sidebar close --> <div id="footer"> </div> <!-- footer close --> </div> <!-- container close -->
블로그가 위와 같은 형식일 때 ".container"에 적용하면 전체폭 크기의 동영상이 노출돼 잘리거나 겹쳐 코드 적용의 의미가 없어지고 ".entry", ".article" 입력하면 본문에서만 적용되며 ".content"는 방명록 등 본문 페이지에 출력되는 항목들은 모두 적용되지만 방명록 등에 기본적으로 소스 적용이 안되어 별 의미가 없지만 공지사항에는 필요할 수도 있겠습니다. 제 블로그는 본문에서만 적용 되도록 $fluidEl = $(".entry"); 적용하였습니다.
위 두가지 방법중 하나를 적용하시면 됩니다.
샘플 동영상
브라우저 폭을 조절하면 동영상도 같이 변경 됩니다.
댓글을 달아 주세요
var $allVideos = $("iframe[src^='//player.vimeo.com'], iframe[src^='//www.youtube.com'], object, embed, iframe[src^='https://www.youtube.com'], iframe[src^='https://www.youtube.com'], iframe[src^='http://videofarm.daum.net'], iframe[src^='https://videofarm.daum.net'], iframe[src^='//videofarm.daum.net']"),
여기 주소들 전부 붉은 색으로 나오고 기타 몇군데도 값도 붉은 색으로 나오네요...
위 주소들은 본문에 위 주소들 중 해당사항이 있으면 코드를 적용하라는 용도입니다.
쉽게 적용되지 않는 부분에 대해서는 저도 뭐라고 답변을 드리기가 힘드네요...
var $allVideos = $("iframe[src^='//player.vimeo.com'], iframe[src^='//www.youtube.com'], object, embed, iframe[src^='https://www.youtube.com'], iframe[src^='https://www.youtube.com'], iframe[src^='http://videofarm.daum.net'], iframe[src^='https://videofarm.daum.net'], iframe[src^='//videofarm.daum.net']"),
$fluidEl = $(".area_view");
$allVideos.each(function() {
$(this)
// jQuery .data does not work on object/embed elements
.attr('data-aspectRatio', this.height / this.width)
.removeAttr('height')
.removeAttr('width');
});
$(window).resize(function() {
var newWidth = $fluidEl.width();
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.attr('data-aspectRatio'));
});
}).resize();
</script>
$fluidEl = $(".area_view"); 에 .area_view 부분에 본문 클래스 넣으세요.
원소스 외에 추가하는 과정에서 문제가 있나보네요. #2 스킨에서 그대로 가져와서 적용하니 잘 됩니다.