카드는 커스텀 설정이 가능한 알림 성격의 레이어로서 Vimeo Business 와 Vimeo Premium 회원은 임베드한 동영상 재생 중에 나타나도록 설정할 수 있습니다. 카드는 간단한 헤드라인이나 관련 설명과 섬네일 및 링크를 포함할 수 있습니다.
✦ 임베드한 동영상에 카드 삽입하기
동영상에 카드를 삽입하거나 편집하려면, 동영상 설정 페이지의 인터렉티브 기능으로 이동하세요. 동영상 재생 중 섹션에서 카드, 이메일 수집을 클릭한 후 드롭다운 메뉴에서 "카드"를 선택하여 내용을 입력합니다.
카드에는 최소한 제목 및 동영상에서 카드가 나타나는 지점을 설정하는 타임스탬프를 표함해야 합니다. 설명, 링크 및 썸네일을 추가할 수 있는 옵션도 있습니다. 카드를 편집하는 도중에 실시간으로 플레이어 미리 보기를 확인할 수 있습니다.
카드 편집 작업을 완료한 후 추가버튼을 클릭하세요. 동영상의 1초당 하나의 카드를 추가할 수 있습니다. 임베딩 설정 편집 작업을 완료한 후 저장 버튼을 클릭합니다.
참고해 주세요: 카드는 임베드된 동영상에서만 나타납니다. Vimeo 사이트 내에서 재생되는 동영상에서는 표시되지 않습니다. 또한 카드를 추가한 동영상에서는 좋아요, 나중에 보기 및 공유 설정이 비활성화됩니다.
✦데스크탑과 모바일 상에서의 카드 표시
카드를 포함한 동영상은 공유한 플랫폼과 시청에 사용되는 기기에 따라 시청 경험에 차이가 있습니다.
데스크탑에서는 카드가 동영상 재생 시작 직후에 오른쪽 상단에 표시됩니다 (해당 지점에 다른 카드를 추가하지 않은 경우). 카드가 포함된 동영상은 데스크탑에서 시청하는 경우 임베딩된 위치 어디에서나 인라인으로 재생됩니다.
모바일 기기에서는 (또는 플레이어의 너비가 415x보다 작은 경우) 플레이어 아래에 카드가 나타납니다. 동영상에 카드가 한번 나타나면, 다음 카드가 나타나는 지점까지 그대로 유지됩니다. 시청자는 플레이어 아래에 있는 카드를 슬라이드하며 볼 수 있고, 보고 있는 카드가 삽입된 지점으로 이동합니다.
Wix, Squarespace, Wordpress와 같은 사이트에서는 카드 포함 동영상이 모바일 웹상에서 인라인으로 재생됩니다. Facebook 및 Twitter에서는 모바일 앱 및 모바일 웹은 vimeo.com 동영상 페이지로 링크됩니다.
✦카드 인터렉티브 통계
동영상 통계 패널에서는 지난 30일간 카드가 표시되고 클릭된 횟수를 확인할 수 있습니다. 동영상 인터렉티브 기능에 관해 자세히 알아보세요.
✦ 카드 포함 동영상의 임베드 코드
일반적인 Vimeo 임베드 코드는 간단한 아이프레임입니다. 모든 시청 환경에서 카드를 지원하기 위해 기존의 임베딩 코드에 javascript wrapper가 추가되어 있습니다. 새 임베드 코드는 반응형이므로 브라우저 창의 크기를 조절해도 플레이어는 기존의 비율을 유지합니다. 아래 javascript wrapper가 포함된 임베드 코드 예시를 확인하세요.
<div class="vimeo-space" style="padding: 56.25% 0 0 0; position: relative;"><iframe src="https://player.vimeo.com/video/76979871" style="height: 100%; left: 0; position: absolute; top: 0; width: 100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
이미 임베드된 동영상에 최근에 카드를 추가한 경우, javascript wrapper를 포함하는 새 임베드 코드로 업데이트해야 합니다. 임베드 설정에서 플레이어 미리보기 바로 위에 있는 임베드 코드를 클릭해 카드가 추가된 새 임베드 코드를 확인할 수 있습니다.
✦ 소셜 플랫폼에 카드 포함 동영상 공유하기
Twitter나 Linkedin과 같은 소셜 플랫폼에 카드를 포함한 동영상을 임베드하는 경우, 동영상의 임베드 코드가 아닌 Vimeo 동영상 페이지 URL을 붙여넣기만 하면 됩니다.
Facebook 또는 Twitter에 동영상을 공유하고 싶지만 Vimeo 동영상 페이지 대신에 내 사이트로 링크하고 싶다면 사이트에 추가 코드를 입력해야 합니다. 소셜 플랫폼 포스팅을 위한 내 웹사이트 최적화하기에 대해 자세히 알아보세요.
✦ 카드 포함 동영상 임베드하기
Wix나 Squarespace와 같은 웹사이트 제작 서비스를 통해 카드 포함 동영상을 임베드하는 경우 임베드 코드에 javascript wrapper가 빠지지 않고 포함되었는지 확인해야 합니다. 위젯을 사용한 임베드는 권장하지 않습니다.
한 페이지에 카드 포함 동영상 여러 개를 임베드하는 경우 javascript 태그 <script src="https://player.vimeo.com/api/player.js"></script>를 하나의 동영상에만 추가하시길 권장합니다. 이후 모든 임베드 코드는 <div>태그만을 포함해야 합니다. Javascript 태그를 여러 번 포함시키는 경우 페이지 작동에 문제가 발생할 수 있습니다.
가장 일반적인 웹사이트 빌더에서 카드 포함 동영상을 임베딩하는 방법에 대한 간단한 설명입니다:
- Wix
- Wix 웹사이트 에디터에서 +Add를 클릭하고 목록 맨 아래의 더 보기를 선택한 후 HTML 코드 옵션을 선택합니다
- 페이지에서 새롭게 보이는 회색 블록 위의 코드 입력 버튼을 클릭하여 편집 창을 펼칩니다.
- 코드옵션이 선택되었는지 확인 후 Javascript 코드가 포함된 Vimeo 임베딩 코드를 붙여넣으세요
- 파란색 업데이트 버튼을 클릭한 후 변경 사항을 사이트에 게시합니다
- Squarespace
- Squarespace 페이지 편집 모드로 들어간 후 페이지 오른쪽 상단의 +블록 추가 아이콘을 클릭합니다
- 메뉴를 스크롤 다운하여 더 보기 섹션에서</>코드옵션을 선택합니다
- Javascript 코드가 포함된 Vimeo 임베딩 코드를 붙여넣은 후 적용 버튼을 클릭합니다
- 편집 작업을 완료하면 왼쪽 상단의 저장 버튼을 클릭합니다
- Wordpress
- Wordpress 포스팅에서 HTML 편집 탭을 선택합니다
- Javascript 코드가 포함된 Vimeo 임베딩 코드를 붙여넣습니다
- 준비가 완료되면 오른쪽 상단에 있는 업데이트를 클릭합니다.
- Tumblr
- 포스팅 유형 선택 단계에서 동영상을 선택합니다
- 웹에서 동영상 추가 옵션을 선택합니다
- Javascript 코드가 포함된 Vimeo 임베딩 코드를 붙여넣습니다
- 임베딩된 Vimeo 플레이어가 로드되며 Tumblr 포스팅에 텍스트를 추가할 수 있는 옵션이 있습니다
- 준비가 완료되면 게시 버튼을 클릭합니다.