유튜브 동영상 퍼올 때 크기 설정하기

by hfkais | 2009. 6. 25. | 4 comments

유튜브 비디오

유튜브에서 동영상을 ‘퍼가기’ 할 때, 소스 코드 옆에 위치한 톱니바퀴 모양 아이콘을 클릭하면 동영상 크기를 변경할 수 있습니다. 업로드 한 동영상의 가로/세로 비율에 따라 각각 4가지 크기로 변경할 수 있죠. 일반 비율인 4:3 비율에서는 320x265, 425x344, 480x385, 640x505 픽셀로 변경되며, 와이드 비율(HD)인 16:9 비율에서는 480x295, 560x340, 640x385, 853x505 크기로 변경됩니다.

허나 유튜브 동영상을 여기저기 올리다 보면, 미리 설정된 네 가지 크기 외에 다른 크기를 사용해야 할 때가 있습니다. 제 블로그의 가로 너비는 약 620 픽셀인데, 미리 설정된 크기인 640 픽셀로 넣으면 넘쳐버리고 560이나 480픽셀로 넣으면 작아서 살짝 아쉽게 되죠. 이럴 땐 직접 소스 코드의 width 값과 height 값을 수정해서 크기를 바꿔주면 됩니다.

 

<object width="480" height="385">
<param name="movie" value="http://www.youtube.com/v/VFUxBYCl6Y4&hl=ko&fs=1&rel=0"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>

<embed src="http://www.youtube.com/v/VFUxBYCl6Y4&hl=ko&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed>
</object>
(△ 유튜브 동영상 퍼가기 소스 예. object나 param 태그는 빼고, embed 태그만 있어도 동영상을 삽입할 수 있습니다.)

 

그런데 주의해야 할 게 있어요. 바로 동영상의 비율과 네비게이션 바의 크기죠. 동영상의 비율이 4:3 이냐, 16:9 냐에 따라서 가로 세로 크기를 각각 다르게 지정해 주어야 합니다. 또 동영상 하단의 네비게이션 바가 갖는 크기가 있기 때문에, 이를 고려해서 수치를 바꿔줘야 합니다. 물론 비율이 맞아떨어지지 않아도 동영상을 보는 덴 전혀 지장 없지만, 별로 보기 좋지 않은 검은색 여백들이 생겨나게 됩니다.

유튜브 비디오

특히 유튜브 퍼가기 소스에 미리 설정된 동영상 크기를 보면 살짝 이상하실 텐데요, 가로x세로 비율이 동영상 비율과는 뭔가 맞질 않습니다. 4:3 비율에서 가로가 640 픽셀이면 세로는 480 픽셀이어야 하는데, 퍼가기 소스에는 세로가 505 픽셀로 설정되어 있습니다. 16:9 비율에서도 마찬가지인데, 이 비율에서 가로가 640 픽셀이면 세로는 360 픽셀이어야 하지만 소스에는 385 픽셀로 설정되어 있죠.

바로 동영상 하단에 붙는 네비게이션 바(또는 플레이 바) 때문입니다. 동영상의 재생과 정지, 탐색, HD사용 여부, 볼륨조절, 퍼가기 소스 복사 등의 기능을 갖고 있는 이 바는, 동영상의 크기를 따라가는 가변적인 가로 사이즈와, 동영상의 크기와 상관없이 항상 고정되어 있는 25 픽셀의 세로 사이즈를 갖고 있죠. 따라서 이 25 픽셀을 염두에 두고 소스를 수정해야 합니다.

 

HD (16:9, 1.77… 비율) 일 때의 크기 -

동영상 크기 (width x height, pixel) 네비게이션 바 포함 크기
1280x720 1280x745
800x450 800x475
600x338 600x363
500x282 500x307

 

SD (4:3, 1.33… 비율) 일 때의 크기 -

동영상 크기 (width x height, pixel) 네비게이션 바 포함 크기
800x600 800x625
600x450 600x475
500x375 500x400
400x300 400x325

 

제 블로그에서 자주 쓰는 가로 600 픽셀 사이즈를 비롯, 거의 100단위로 끊어지는 몇몇 크기 조합들의 수치를 표로 정리해 봤습니다. 대부분의 경우엔 유튜브에서 설정된 사이즈를 쓰게 되지만요. 16:9 비율에서 몇몇 크기 조합들은 계산시 비율이 좀 애매하긴 한데, 최대한 근사값으로 썼습니다.

별도로 크기를 지정해서 쓰고 싶으시다면, 위에서 알려드린 동영상 비율과 네비게이션 바의 크기를 잘 계산해서 쓰시면 됩니다. 16:9 비율에서는 가로 크기에서 1.77777778 을 나누고, 4:3 비율에서는 가로 크기에서 1.33333333 을 나누어 세로 크기를 구하면 되지요. 그리고 네비게이션 바의 세로 크기인 25 를 더하면 됩니다.

물론 복잡한 계산 없이 대충 써 넣어도 동영상 보는 데엔 전혀 지장이 없으니, 걱정 마세요~.

댓글 4개:

  1. 저는 제시된 크기 중에서 골라서 사용합니다. 계산하여 크기를 수정하는 일은 귀챦아서.. ㅡ.ㅡa;;;

    답글삭제
  2. zizukabi 님 /
    저도 그래서 블로그 게시물 너비를 640px로 넓혀버릴까...고민중이랍니다.~

    답글삭제
  3. 풉 난 아이팟터치로 보면 됨.

    답글삭제

- 스팸 방지를 위해 보안문자(캡차) 확인을 사용하고 있습니다.
- 스팸댓글이 너무 많이 달려 댓글 검토 기능을 쓰고 있습니다. 입력하신 댓글이 당장 화면에 나타나지 않아도, 블로그 주인장은 댓글을 보고 있으니 안심하세요. 1~3일 내에 검토가 완료되면 댓글이 게시됩니다.

덧글 페이지로 이동합니다. 스팸방지를 위해 '단어확인'을 사용하고 있습니다.