티스토리, 동영상 반응형으로 만들기

반응형 스킨을 제작하면서 가장 골치아팠던 부분은 동영상을 어떻게 반응형으로 만들 것인지였다. 물론 동영상을 포스팅에 넣을 때 일일히 반응형으로 만드는 방법은 많이 알려져있다. 하지만 그것마저 귀찮은 나이기에 좀 더 편리한 방법을 찾기 시작했고, 우연히 티스토리에서 제공하는 반응형 스킨 속에 답이 있다는 사실을 알아냈다.



1. HTML에 스크립트 추가

어려운 방법이 아니다. 아래의 스크립트를 HTML/CSS 편집기에 추가해주면 된다. <head></head> 사이에 넣어주기만 하면 된다.


<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 = $(".article");
		$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();
		});
</script>


2. 블로그 스킨 확인

위의 스크립트가 정상적으로 작동하기 위해서는 본문의 위치를 지정해주어야 한다.


<div class="article">
	[##_article_rep_desc_##]
</div>

티스토리 블로그의 본문 내용은 article_rep_desc 치환자에 담겨있다. 또한 이 블로그는 본문을 article 이란 클래스로 지정해둔 상태다. HTML/CSS 편집기에 들어가서 현재 자신의 블로그 스킨이 본문을 어떻게 감싸고 있는지 확인하고 그에 맞게 1번의 스크립트를 수정해주면 된다.



3. 수정

블로그 스킨이 어떻게 만들어져 있는지 확인을 했으면 수정을 하면 된다.


$fluidEl = $(".article");
ex) $fluidEl = $("#article");

1번 스크립트에서 위 부분을 찾고 article 부분을 바꿔주면 된다. 만약 본문이 CLASS에 의해서 감싸져 있다면 클래스명 앞에 점(.)을 추가해야 한다. 반면에 본문이 ID에 의해 감싸져 있다면 점이 아닌 샵(#)을 추가해야 한다.



마무리

위 과정을 끝냈다면 블로그 내의 동영상은 모두 반응형으로 작동하고 있을 것이다. 물론 스킨이 반응형을 지원하지 않는다면 동영상 또한 반응형으로 작동하지 않는다. 궁금한 지점들이 있으면 댓글로 문의를 남겨주셔도 좋고, 위 글에 오류가 있다면 지적도 감사하게 받겠다.


Leave a comment
Your name *
Your PassWord *
Comment *
COMMENT