이메일은 많은 시청자와 동영상을 공유하기에 훌륭한 도구지만, 대부분의 주요 이메일 클라이언트 (Gmail, Yahoo 등)는 이메일 내에서 곧바로 동영상을 재생할 수 있는 서비스를 지원하지 않습니다. 다음은 동영상을 이메일에 추가할 수 있는 여러 가지 방법입니다.
✦ Vimeo 동영상 페이지로 링크되는 이미지 파일 삽입
사용 중인 이메일 캠페인 생성 서비스가 있는 경우, 해당 서비스에서 동영상을 클릭 가능한 이미지로 임베드할 수 있는 도구를 제공할 수도 있습니다. 다음은 알아두면 유용한 서비스 제공 업체입니다.
- Mail Chimp: https://mailchimp.com/help/add-video-to-a-campaign/
- Constant Contact: https://knowledgebase.constantcontact.com/articles/KnowledgeBase/6227-insert-a-video-link-in-the-next-generation-editor?+target=&lang=en_US#VideoBlock
- Drip: https://help.drip.com/hc/en-us/articles/115003729431-An-Alternative-to-Embedded-Video
- Campaign Monitor: https://help.campaignmonitor.com/email-builder-video-and-music
Gmail과 같은 이메일 클라이언트의 경우, 수동으로 이미지 파일을 삽입하고 하이퍼링크를 Vimeo의 동영상 페이지, (예시: https://vimeo.com/76979871), 리뷰 페이지 (예시: https://vimeo.com/staff/review/76979871/3b3934c24b) 또는 독립된 플레이어 (예시: https://player.vimeo.com/video/76979871)로 추가할 수 있습니다. 독립된 플레이어 링크는 동영상의 소스 코드에서 찾을 수 있습니다.
이미지 파일에서 동영상으로 링크를 걸 때는 재생 버튼이 들어간 이미지를 사용하는 것이 가장 좋습니다. 이렇게 하면 이미지가 동영상 플레이어로 보일 뿐만 아니라 시청자에게 곧 동영상 재생이 이어질 것임을 알릴 수 있습니다. Vimeo 플레이어의 스크린샷을 찍으면 아주 쉽게 재생 버튼 그래픽이 들어간 섬네일로 활용할 수 있습니다.
다음은 동영상 설정 페이지 예시입니다.
(💡TIP: Plus 및 상위 멤버십 회원은 동영상 설정 페이지의 Embed 섹션에서 미리 보기 플레이어를 커스텀할 수 있습니다.)
개발자는 Vimeo API나 oEmbed를 사용하여 재생 버튼이 있는 섬네일 이미지를 가져올 수도 있습니다. Vimeo의 API에 대한 자세한 내용은 아래 자료를 참조하세요.
- https://developer.vimeo.com/api/guides/start
- https://developer.vimeo.com/api/oembed/videos#embedding-a-video-with-oembed-step-1
동영상 섬네일을 자유롭게 디자인하고 제작할 수 있습니다. 대부분의 이메일 클라이언트는 애니메이션이 들어간 GIF를 지원하는 점 참고하시기 바랍니다.
✦ HTML을 이용한 동영상 삽입
시청자가 주로 사용하는 이메일 클라이언트가 Apple 메일과 같이 본문 내 재생을 지원하는 경우에는 커스텀 HTML 코드를 통해 동영상을 임베드할 수 있습니다.
참고: 이 옵션에는 다음의 전제 조건이 필요합니다.
- HTML에 대한 기술적 지식을 어느 정도 갖춰야 합니다.
- 메시지의 HTML을 직접 편집할 수 있는 이메일 클라이언트가 필요합니다.
- 최소 Vimeo Pro 이상의 멤버십 계정이 필요합니다.
시작하려면 Vimeo에서 호스팅한 동영상 파일의 다이렉트 파일 링크를 확보한 다음 이를 이메일 클라이언트의 HTML 동영상 태그에 삽입해야 합니다. 동영상의 다이렉트 링크는 아래 그림과 같이 동영상 설정 페이지의 '배포' 섹션에서 찾을 수 있습니다.
(참고: 여러 가지 다양한 인터넷 연결을 바탕으로 스트리밍하는 것이 가장 쉬우므로 표준 화질을 권장합니다.)
위의 섬네일 옵션과 마찬가지로 동영상을 지원하지 않는 이메일 클라이언트의 경우를 대비하여 '대체 이미지'를 만들어야 합니다. 코드는 다음 예시와 같이 나타날 수 있습니다.
<video width="320" height="176" controls poster="https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F452001751_295x166.webp&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png" src="https://player.vimeo.com/external/76979871.sd.mp4?s=64f8b272e5a5a47e8c5208f68beabc71a443a61e&profile_id=112" >
<!-- fallback 1 -->
<a href="https://www.vimeo.com/staff/player" ><img height="176"
src="https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F452001751_295x166.webp&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png" width="320" /></a>
</video>
You can find a detailed overview of using HTML5 video in email from Email on Acid: https://www.emailonacid.com/blog/article/email-development/a_how_to_guide_to_embedding_html5_video_in_email