티스토리에 비메오(Vimeo) 영상넣기 시행착오

며칠 전에 처음으로 제 포스팅에 동영상을 넣었습니다.

아래 포스팅입니다.

2020/04/02 - 안양천 산보 중에 길을 멈추다...

안양천 산보 중에 길을 멈추다...

지난 주말에 아내와 같이 안양천을 한참 걸었습니다. 꽃을 유독 좋아하는 아내에게는 이 시기의 안양천은 참 좋은 선물입니다. 아직 벚꽃은 만개하지 않았지만 자세히 보면 수많은 들꽃들이 고개를 들고 봄바람에..

smorning.tistory.com

동영상을 삽입하는 것은 처음이어서 몇 가지 시행착오를 겪었던 것들을 공유해 봅니다.

1) 촬영 영상의 크기

제 휴대폰으로 촬영한 영상은 1080(세로) x 1920 (높이)로 Full HD급 화질입니다.

몇 초짜리 짧은 영상이어서 48.28MB 정도의 용량입니다.

2) 비메오(Vimeo)에 영상 올리기

유튜브에 영상을 올려도 되지만 저는 비메오의 UX가 더 좋아서 이 영상은 비메오 (Vimoe)에 올리기로 하고 무료회원 가입을 하고 위의 영상을 올렸습니다.

참고로, 비메오(Vimeo)는 유튜브처럼 광고가 수익모델이 아니고 유료 회원제로 운영을 하고 있습니다.

그렇지만 친절하게도 저 같은 Casual User들을 위해서 Free Account를 제공하는데 500MB/월, 5GB/년 이내의 영상을 올릴 수 있습니다.

3) 비메오(Vimeo) 영상을 티스토리에 심기

영상을 올린 후에 상단의 공유버턴을 누르면 아래와 같은 2가지 옵션이 뜹니다.

어느 것을 선택하느냐에 따라 티스토리에서 다른 결과가 나오기 때문에 초보자는 주의를 해야 하더군요.

◆동영상 링크 복사

이 버턴을 누르면 영상의 URL 주소인 "https://vimeo.com/402605449"가 클립보드에 복사가 됩니다. 이것을 티스토리 에디터 화면의 "기본 모드"에서 바로 붙여 넣기를 하면 됩니다.

그 상태에서 확인을 위해 HTML 모드로 가서 내용을 보면, 상기 URL 외에 필요한 코드가 구성이 되었다는 것을 알 수 있습니다. 아래 화면입니다.

이때 재미있는 것은 동영상의 화면 사이즈입니다.

원본 영상과 비메오(Vimeo)에 업로드된 영상의 사이즈는 "1080(세로) x 1920 (높이)"이었는데, "860(세로) x 1592(높이)로 전체 크기가 0.8배로 축소되었습니다.

티스토리로 넘어오면서 사이즈가 축소되는 정확한 이유는 잘 모르겠습니다. 아마 친효스킨에서 가로폭을 860픽셀로 설정을 해 둬서 그런 것이 아닌가 추측을 해 봅니다.

위 상태에서 "완료"후에 화면을 열어 보면 전체 화면을 다 채우는 영상이 보입니다.

아래와 같은 화면입니다.

"860(세로) x 1592(높이) 화면이 나와서 가로 방향으로 화면이 시원하기는 하지만 세로 방향이 많이 잘리는 문제가 생겼습니다.

방문자에서 꽃이 바람에 흔들리는 모습을 보여 드리고 싶었는데 아쉬움이 남는 화면입니다.
(단, 이 화면은 핸드폰으로 보면 화면 전체를 채우는 화면이어서 OK)

그래서 이 글의 맨 아래에 있는 최종 수정 화면과 같은 방법으로 수정을 하였습니다.

◆임베딩 코드 복사하기

두 번째 옵션 버턴인 "임베딩 코드 복사하기"를 누르면 아래 내용이 클립 보드에 내용이 복사가 됩니다.

<iframe src="https://player.vimeo.com/video/402605449" width="640" height="1138" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

상기 iframe 코드를 티스토리 에디터에서 넣을 때 주의해야 할 것이 있습니다.

반드시 "HTML"모드로 전환 후에 붙여 넣기를 해야 합니다. 만일 일반 모드로 넣으면 이상한 화면이 나타납니다.

이 코드를 자세히 보시면 재미있는 것이 발견됩니다.

화면 크기가 "640(세로) x 1138(높이)"로 원본 사이즈에 비해서 0.6배로 줄어 있습니다.

완료 후에 최종 화면도 아래와 같이 좀 작게 나타납니다.

임베딩 코드 복사하기로 진행을 했을 때 제일 큰 문제는 휴대폰 (갤럭시 노트 9)으로 보면 화면이 크게 잘려 보이는 심각한 문제가 생기더군요... 친효스킨이 반응형 스킨인데 이 모드에서 왜 이런 문제가 생기는지는 천천히 더 공부를 해 봐야 하겠습니다... 하여튼 이 방법은 NG입니다.