반응형 블로그 에서 유튜브 등의 사이트에서 링크가 아닌 바로 시청이 가능한 소스를 가져올 때 동영상 크기가 맞지 안아 본문 범위를 벗어나 잘리거나 다른 영역을 침법 하는 경우가 있는데 유동적인 넓이에 따라 동영상의 사이즈도 같이 가로, 세로 조절되게 하는 제가 아는 두가지 방법입니다.
반응형 블로그 동영상
CSS로 적용하기
예전에 외국 어느 사이트에서 퍼온 방식으로 작성중인 글에 동영상을 삽일 할때 동영상 소스를 <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% 가 되어 가로 폭이 줄어 들면 세로는 비율로 같이 줄어 들게 됩니다.
jquery로 적용하기
<script src="http://t1.daumcdn.net/tistory_admin/lib/jquery-2.1.4.min.js">
<script type="text/javascript">
$(document).ready(function() {
var $allVideos = $("iframe[src^='//player.vimeo.com'], iframe[src^='//www.youtube.com'], object, embed, iframe[src^='http://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=”http://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”); 적용하였습니다.
위 두가지 방법중 하나를 적용하시면 됩니다.
워드프레스 네이버 검색 노출을 위해 운영 중인 워프 블로그를 네이버 웹마스터 도구에 등록하고 11일 차가 지난 시점입니다.