크리에이티브 커먼즈 라이선스(CCL) 표시는 각 게시물의 하단우측에서 확인할 수 있습니다. Creative Commons License(CCL) stamp is at bottom right of each post. RSSEnglish한국어


화면 폭이 좁아짐에 따라서 본문에 삽입된 유튜브 영상의 크기도 알아서 변하게 만드는 방법을 소개해보겠습니다.

아래의 예시 영상의 크기가 변하는 걸 보고싶다면 브라우저 창 테두리를 끌어서 좌우 폭을 줄여보세요.



onresize event를 사용하지 않고, css만 이용하기 때문에 창크기 변경시 성능하락도 적습니다. 위 예시처럼 바꾸는 방법을 자세하게 안내해드리겠습니다.

입력하는 방법은 여러가지이지만, 티스토리의 유튜브 영상 삽입 플러그인을 사용한 경우, HTML모드로 보면 아래같은 코드가 추가되어 있습니다.

<p>
	<div class="tt-youtube-plugin" style="text-align: center">
		<iframe width="768" height="432" src="http://www.youtube.com/embed/_Vu5MPVnKwA?rel=0" frameborder="0" allowfullscreen=""></iframe>
	</div>
</p>

DIV태그가 생성되고 "tt-youtube-plugin"이라는 클래스가 자동으로 붙는데요, 뭐, 이건 플러그인에서 따로 지정해주는 스타일은 아닙니다. 그래서 혹시 필요하다면 style.css에 따로 정의해주는 편이 좋습니다만 스킨을 자주바꾸는 분이라면 HTML 코드안에 스타일을 직접 지정해야겠죠.


이제 위 코드를 자동으로 크기가 변하도록 손을 좀 봅니다. 스타일 코드가 아래같이 정의되어있는 상태에서,

/* style.css */

.tt-youtube-plugin        {position:relative;padding-top:0;height:0;}
.ttyoutube-16-9           {padding-bottom:56.25%;}
.ttyoutube-16-10          {padding-bottom:62.5%;}
.tt-youtube-plugin iframe {position:absolute;top:0;left:0;width:100%;height:100%;}

HTML 코드를 아래처럼 바꿨습니다.

<div style="max-width:768px;">
	<div class="tt-youtube-plugin ttyoutube-16-9" style="text-align: center">
		<iframe width="768" height="432" src="https://www.youtube.com/embed/_Vu5MPVnKwA?rel=0&loop=1&playlist=_Vu5MPVnKwA" frameborder="0" allowfullscreen=""></iframe>
	</div>
</div>

바깥의 감싸는 DIV 태그의 "max-width" 스타일은 스킨의 폭 제한이 없는 경우, 영상이 무한정 커지는 것을 방지하기 위해서 꼭 넣습니다. 안쪽의 DIV에 지정하면 안되나? 네, 안됩니다. 안쪽의 DIV의 스타일에 있는 %단위가 참조하는 값이 틀려지기 때문에 폭 제한을 두려는 경우엔 한 번 감싸야합니다. 그리고 내부의 IFRAME에 걸린 "position:absolute ... height:100%"의 css룰을 통해 영상을 차지하는 공간이 없이 레이어 위에 붕 뜬 상태로 만들고 감싸는 태그의 크기를 따라가도록 바꾸었습니다. 여기서 영상의 높이정보가 손실되므로 감싸는 태그의 "ttyoutube-16-9"클래스에 "padding-bottom"으로 폭에 대해서 자동으로 비율이 맞춰지는 높이를 만들어줍니다. 16:9 영상이니까 9/10 = 56.25%입니다. 이 정도까지는 수동으로 입력해줍니다.

덤으로 주소뒤에 "&loop=1&playlist=(video index)" 파라메터를 추가했는데, 별건 아니고 반복재생을 시키는겁니다. PC브라우저의 경우엔 거의 대부분 반복재생이 됩니다. "rel=0"은 영상이 끝난 후, 관련 영상이 자동으로 표시되지 않도록 하는 파라메터구요.


여기까지만 하면 일단 폭이 좁아졌을 때, 자동으로 크기가 변하는 삽입영상이 완성됩니다. 그런데 항상 좌측으로만 정렬됩니다. 이게 보기싫다면 중앙에 정렬하는 방법이 있습니다.

<div style="text-align:center;">
	<div style="max-width:768px;margin:0 auto;">
		<div class="tt-youtube-plugin ttyoutube-16-9">
			<iframe src="https://www.youtube.com/embed/_Vu5MPVnKwA?rel=0&loop=1&playlist=_Vu5MPVnKwA" frameborder="0" allowfullscreen=""></iframe>
		</div>
	</div>
</div>

위와 같이, DIV 태그를 하나 더 감싸고 "text-align:center;" 스타일을 지정합니다. 그리고 그 안에서 폭이 자동으로 결정되고 있는 DIV에 대해 "margin:0 auto;" 스타일을 지정합니다. 상하마진은 0이고 좌우마진은 자동으로 하라는 뜻입니다. 그러면 아래 영상처럼 센터로 정렬이 되면서 혹시 컨테이너 태그의 폭이 줄어들면 "max-width"까지는 버티다가 결국 같이 줄어듭니다.



스킨을 자주 변경하는 경우, 모든 스타일을 태그내에 지정해야만 합니다. 아래와 같습니다.

<div style="text-align:center;"><div style="max-width:768px;margin:0 auto;"><div style="padding-bottom:56.25%;position:relative;padding-top:0;height:0;"><iframe src="https://www.youtube.com/embed/_Vu5MPVnKwA?rel=0&loop=1&playlist=_Vu5MPVnKwA" frameborder="0" allowfullscreen="" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div></div></div>

복사해두고 붙여넣기하면서 사용하면 편리하겠죠?... "contenteditable"속성을 달아놨기 때문에 편집한 다음에 복사해가시면 됩니다. 단점은 16:9 비율이 아닌 경우엔 계산기 두드려서 비율(높이/너비 %)을 맞춰야한다는 단점이 있네요.


일일히 새롭게 삽입하기가 귀찮고, 그냥 <iframe>만 덜렁 던져놓고 페이지 로딩때마다 자동 일괄적용하고 싶다면, "반응형 스킨에 유튜브 영상 넣기 - EASY ver." 이걸 시도해보세요. 단, 페이지 로딩속도 하락은 있을 수 있습니다.

저작자 표시
신고

Comment : 0

1 ··· 12 13 14 15 16 17 18 19 20 ··· 31
Powered by Kakao & Tistory   /   Designed by kLiR.
kLiR's Tistory tips