이 기능을 사용하려면 Business, Premium, Standard, Advanced 또는 Enterprise 멤버십이 필요합니다.
카드는 Vimeo 회원이 임베드된 동영상이나 일부공개 동영상을 재생하는 동안 표시되도록 설정할 수 있는 맞춤형 알림 스타일 레이어입니다. 카드는 간단한 헤드라인이나 관련 설명, 섬네일, 링크로 구성할 수 있습니다.
이 도움말에 포함된 내용:
동영상에 카드 설정하기
동영상에 카드를 추가하거나 편집하려면 동영상 설정에서 인터랙티브 도구 탭으로 이동합니다. 동영상 재생 중 섹션에서 + 카드, 연락처 양식을 클릭한 다음, 드롭다운 메뉴에서 '카드'를 선택하여 항목이 나타나면 카드에 내용을 입력합니다.
카드에는 최소한 제목과 동영상에서 카드가 처음 표시되기를 원하는 타임스탬프를 입력해야 합니다. 설명, 링크 및 섬네일을 추가할 수 있는 옵션도 있습니다. 카드를 편집하는 도중 실시간으로 플레이어 미리 보기를 확인할 수 있습니다. 카드를 나란히 추가할 수 있는 최단 시간은 6초입니다.
카드 편집 작업을 완료한 후 추가 버튼을 클릭하세요. 동영상의 1초당 하나의 카드를 추가할 수 있습니다. 임베드 설정 편집 작업을 완료한 후 저장 버튼을 클릭합니다.
⚠️참고: 동영상에 카드를 추가하면 좋아하기, 나중에 보기, 공유 제어 기능이 비활성화됩니다.
카드 보기
카드가 있는 동영상의 시청 환경은 동영상이 공유되는 플랫폼과 동영상을 보는 데 사용되는 기기에 따라 다릅니다.
⚠️참고: 카드는 가로 모드(표준 플레이어)에서 너비가 최소 600픽셀이고 세로 모드(높이가 너비보다 큰 플레이어)에서 너비가 225픽셀 이상인 플레이어에서만 표시됩니다.
카드는 동영상의 오른쪽 상단 모서리에 처음 표시된 후 6초 동안 유지됩니다(해당 창에 표시할 다른 카드가 추가되지 않은 경우). 카드가 포함된 동영상은 삽입된 모든 위치에서 인라인으로 재생됩니다. 프라이버시 설정이 '비공개' 또는 '일부 공개'인 경우 Vimeo의 동영상 페이지에도 나타납니다.
Wix, Squarespace, WordPress와 같은 사이트에서 카드가 포함된 동영상은 모바일 웹에서 인라인으로 재생됩니다. Facebook과 Twitter에서 모바일 앱과 모바일 웹은 Vimeo.com 동영상 페이지로 연결됩니다.
카드에 대한 참여 분석
동영상 페이지의 분석 패널에서는 지난 30일간 카드가 표시되고 클릭된 횟수를 확인할 수 있습니다. 동영상 설정 분석 패널에서 동영상 인터랙티브 도구 분석에 대해 자세히 알아보세요.
쇼케이스의 카드
이전에 추가한 카드와 기타 동영상 인터랙티브 도구(예: 종료 화면, 연락처 양식)가 이제 쇼케이스에 표시됩니다. 쇼케이스를 공유하면 시청자가 쇼케이스를 시청할 때 카드를 보게 됩니다. Vimeo 쇼케이스에서 자세히 알아보세요.
카드 포함 동영상의 임베드 코드
일반적인 Vimeo 임베드 코드는 간단한 아이프레임입니다. 모든 시청 환경에서 카드 기능을 지원하기 위해 일반 임베드 코드에 자바스크립트 래퍼가 추가되었습니다. 새 임베드 코드는 반응형이므로 브라우저 창의 크기를 조절해도 플레이어는 기존의 종횡비를 유지합니다. 자바스크립트 래퍼가 굵게 표시된 아래의 임베드 코드 예시를 참조하세요.
<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>
이전에 임베드된 동영상에 최근에 카드를 추가한 경우, 사이트의 임베드 코드를 업데이트하여 자바스크립트 래퍼를 포함시켜야 합니다. 동영상에 카드를 추가한 후 새 임베드 코드에 액세스하려면 임베드 설정에서 플레이어 미리 보기 위에 있는 회색의 임베드 코드 버튼을 클릭합니다.
소셜 플랫폼에 카드 포함 동영상 공유하기
Twitter 또는 LinkedIn과 같은 소셜 플랫폼에서 카드가 포함된 동영상을 삽입하려는 경우 Vimeo 임베드 코드 대신 Vimeo 동영상 페이지 URL을 게시물에 붙여넣으면 됩니다.
Facebook이나 Twitter에서 동영상을 공유하고 싶지만 게시물이 Vimeo 동영상 페이지가 아닌 내 사이트로 다시 링크되도록 하려면 웹사이트에 몇 가지 코드를 추가해야 합니다. '소셜 미디어 플랫폼 게시를 위한 웹사이트 최적화'에서 자세히 알아보세요.
카드 포함 동영상 임베드하기
Wix나 Squarespace와 같은 웹사이트 제작 서비스를 통해 카드 포함 동영상을 임베드하는 경우 임베드 코드에 javascript wrapper가 빠지지 않고 포함되었는지 확인해야 합니다. 위젯을 사용한 임베드는 권장하지 않습니다.
카드가 삽입된 동영상 여러 개를 하나의 페이지에 임베드하는 경우, 자바스크립트 태그 <script src="https://player.vimeo.com/api/player.js"></script>를 페이지의 동영상 중 하나에만 추가할 것을 권장합니다. 이후 모든 임베드에는 새로운 <div> 태그만 포함되어야 합니다.
자바스크립트 스크립트 태그를 여러 번 포함시키면 페이지 성능에 영향을 줄 수 있습니다.
일반적인 웹사이트 빌더를 사용하여 카드가 삽입된 동영상을 임베드하려면 다음 단계를 따르세요.
- Wix
- Wix 웹사이트 에디터에서 +추가를 클릭하고 목록 맨 아래의 더 보기를 선택한 후 HTML 코드 옵션을 선택합니다.
- 페이지에서 새롭게 보이는 회색 블록 위의 코드 입력 버튼을 클릭하여 편집 창을 펼칩니다.
- 코드 옵션이 선택되었는지 확인 후 자바스크립트 래퍼가 포함된 Vimeo 임베드 코드를 붙여넣습니다.
- 파란색 업데이트 버튼을 클릭한 후 변경 사항을 사이트에 적용합니다.
- Squarespace
- Squarespace 페이지 편집 모드로 들어간 후 페이지 오른쪽 상단의 +블록 추가 아이콘을 클릭합니다.
- 메뉴에서 스크롤을 내려 더 보기 섹션에서 </> 코드 옵션 선택합니다.
- 자바스크립트 래퍼가 포함된 Vimeo 임베드 코드를 붙여넣은 후 적용 버튼을 클릭합니다.
- 편집 작업을 완료하면 왼쪽 상단의 저장 버튼을 클릭합니다.
- Wordpress
- Wordpress 게시물에서 HTML 편집 탭을 선택합니다.
- 자바스크립트 래퍼가 포함된 Vimeo 임베드 코드를 붙여넣습니다.
- 준비가 완료되면 오른쪽 상단에 있는 업데이트를 클릭합니다.
- Tumblr
- 포스팅 유형 선택 단계에서 동영상을 선택합니다.
- 웹에서 동영상 추가 옵션을 선택합니다.
- 자바스크립트 래퍼가 포함된 Vimeo 임베드 코드를 붙여넣습니다.
- 임베드된 Vimeo 플레이어가 로드되며 Tumblr 게시물에 텍스트를 추가할 수 있는 옵션이 있습니다.
- 준비가 완료되면 게시 버튼을 클릭합니다.