Home

반응형 블로그 동영상 자동 크기 조절 방법

반응형 블로그에서 유튜브 등의 사이트에서 링크가 아닌 바로 시청이 가능한 소스를 가져올 때 동영상 크기가 맞지 안아 본문 범위를 벗어나 잘리거나 다른 영역을 침법 하는 경우가 있는데 유동적인 넓이에 따라 동영상의 사이즈도 같이 가로, 세로 조절되게 하는 제가 아는 두가지 방법입니다.


1. CSS 속성

<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% 가 되어 가로 폭이 줄어 들면 세로는 비율로 같이 줄어 들게 됩니다.



2. jquery


<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"); 적용하였습니다.



위 두가지 방법중 하나를 적용하시면 됩니다.


샘플 동영상

브라우저 폭을 조절하면 동영상도 같이 변경 됩니다.


more

댓글을 달아 주세요

  1. ㅇㅇ
    2017.01.25 16:16 신고
    포스팅 잘봤습니다. 그런데 두번째 방법을 사용했을 때 제 블로그에서는 적용이 안되더군요. 어려운 질문이지만 그 원인을 알고 싶습니다. 스크립트를 붙여넣었을 때 링크 부분들이 빨간글씨로 나타던데 그래서 안되는건가요? 짧은 지식으로 추리해본 결과, 링크가 연결이 안되어있어서 빨간글씨인가...싶어서요. 너무 장황한 질문이면 답 안 하셔도 됩니다.
    • 2017.01.25 22:46 신고
      티스토리 편집기로 봤을때 많은 부분이 붉은 색으로 나옵니다.

      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']"),

      여기 주소들 전부 붉은 색으로 나오고 기타 몇군데도 값도 붉은 색으로 나오네요...

      위 주소들은 본문에 위 주소들 중 해당사항이 있으면 코드를 적용하라는 용도입니다.

      쉽게 적용되지 않는 부분에 대해서는 저도 뭐라고 답변을 드리기가 힘드네요...
    • ㅇㅇ
      2017.01.25 23:57 신고
      답해주신 건가요? 제가 괜히 처음에 비밀댓글로 해서 작성자님 댓글이 안보여요. 죄송하지만 다시 달아주실 수 있으신가요?
    • ㅇㅇ
      2017.01.26 00:02 신고
      감사합니다. 제가 html을 잘 몰라서 괜히 곤란하게 해드렸네요. 그래도 도움이 많이 됐어요.
    • 2017.01.26 00:07 신고
      저도 이쪽에는 많은 지식이 없네요.. 도움 못드려 죄송스럽습니다 ㅠㅠ
    • 지나가다
      2017.04.05 00:27 신고
      <script>
      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 스킨에서 그대로 가져와서 적용하니 잘 됩니다.

.

Secret