본문 바로가기
블로그팁

유튜브 동영상 크기 조절 및 블로그에 올리는 방법

POSTED BY© 듀륏체리 2014. 2. 15.
  유튜브 동영상 크기 조절은 동영상 하단의 '공유 - 소스 코드'를 선택한 후 가로 560, 세로 315 픽셀의 기본 동영상 크기 위외에 맞춤 크기를 선택한 다음, 블로그의 가로 폭에 맞추어 원하는 크기로 올릴 수 있습니다. 네이버 블로그를 기준으로 본문의 폭은 3단 구성은 550, 2단 구성은 740, 1단 구성은 900 픽셀이며, 티스토리는 본문 크기가 다르고, 모바일에서는 유튜브 동영상 플레이어가 잘려져 보이기 때문에 블로그에 올리기 위해서는 소스 코드의 수정이 필요한데, 이번 포스팅에서는 유튜브 동영상 크기 조절 및 블로그에 올리는 방법에 대해 소개해 드리도록 하겠습니다.


* 유튜브 동영상 크기 조절 방법

※ 유튜브 동영상을 블로그나 웹사이트에 올리기 위해서는, 동영상 하단의 '공유 - 소스 코드'를 선택하면 되는데, 동영상 기본 크기는 가로 폭 560 픽셀, 세로 높이는 315 픽셀 입니다. 블로그의 본문 폭에 맞추어 동영상을 올리기 위해서는 동영상 크기에서 맞춤 크기를 선택한 후 픽셀 값을 입력하면 원하는 크기로 조절하여 올릴 수 있으며, '...rel=0' 이후에 코드를 추가하면 HD 고화질로 재생할 수 있도록 설정할 수 있는데, 보다 자세한 사항은 포스팅 하단의 관련 포스팅을 참조하면 됩니다.

 * 네이버 블로그 유튜브 동영상

 * 티스토리 블로그 유튜브 동영상

※ 블로그에 유튜브 동영상 올리는 방법은 동영상 소스코드를 복사한 후 블로그 에디터에서 HTML 모드로 전환하여 붙여넣기 하면 되는데, 네이버 블로그의 경우 모바일 웹이나 모바일 앱에서도 자동으로 크기가 조절이 되어 동영상을 재생할 수 있지만, 티스토리의 경우 소스코드의 동영상 크기가 모바일 화면에서도 그대로 고정이 되어 화면이 일부만 보이기 때문에 위의 캡쳐 이미지 처럼 나타나게 하기 위해서는 수정이 필요 합니다.

* 티스토리 블로그에 유튜브 동영상 올리는 방법

※ 티스토리 블로그에 유튜브 동영상을 올리는 경우에 소스 코드에 지정되어 있는 가로 폭이 PC화면 뿐만 아니라 모바일 웹에서도 그대로 적용이 되기 때문에, 크기가 작은 모바일 화면에서는 유튜브 동영상을 재생하기가 어렵게 됩니다. 티스토리의 경우 PC와 모바일 모두에서 유튜브 동영상을 원활하게 재생하기 위해서는 유튜브 동영상 소스코드의 'iframe width=' 값을 픽셀(숫자) 값에서 "100%"로 변경해 주면, PC화면에서는 블로그 본문 가로폭의 크기에 맞추어 유튜브 동영상 플레이어 창이 맞추어 지며, 모바일 화면에서도 플레이어 창 전체가 나타나게 됩니다.



 유튜브 동영상의 크기는 FitVids 스크립트를 이용하여 조절할 수 있지만, 설정이나 사용이 다소 복잡한 편으로, 동영상 소스 코드를 맞춤 크기를 선택하여 올리거나, 티스토리 블로그의 경우 가로폭의 값 입력한 후 100%로 수정해 주면, 플레이어 창이 PC와 모바일 화면 크기에 맞추어 나타나게 됩니다. 네이버 블로그의 경우 소스코드 수정 없이 모바일 웹과 모바일 앱 화면에 맞추어 조정이 되는데, 참고로 관련 포스팅을 참조하면 블로그에 올린 동영상을 바로 HD 고화질로 재생 할 수 있습니다. 이상, 유튜브 동영상 크기 조절 및 블로그에 올리는 방법에 대한 간단한 소개 였습니다.

반응형

댓글