この機能には、Business、Premium、Standard、Advanced、または Enterpriseメンバーシップが必要です。
カードはカスタマイズ可能な通知機能のことで、Vimeoメンバーは埋め込み動画または限定公開の再生時に表示するよう設定できます。ヘッドライン (タイトル) だけのシンプルなカードから、概要・サムネイル・リンクを付けた具体的なカードまでお選びいただけます。
記事の内容：
- 動画にカードを設定する
- カードの表示
- カードのエンゲージメント分析
- ショーケースのカード
- カード付きの動画の埋め込みコード
- SNS 上でカード付きの動画を上手にシェアする方法
- カード付き埋め込み動画の活用方法
動画にカードを設定する
自分の動画にカードを追加または編集するには、その動画の設定ページの [インタラクションツール] のタブより行います。[動画の再生中] の項目から、[+ カード、お問い合わせフォーム] をクリックし、ドロップダウンメニューより「カード」を選択します。そこでカード設定に必要な項目を入力します。
最低限の設定として、動画のどの位置に表示するかを決めるタイムスタンプとカードのタイトルの入力が必要になります。オプションとして概要、リンク、サムネイルも追加できます。カードの設定編集時にはプレーヤー上にプレビューが表示され、リアルタイムにアップデートをご確認いただけます。カードを並べて追加できる最短時間は6秒です。
カードの編集が終わったら、追加ボタンをクリックします。動画 1 秒毎に 1 つのカードを追加できます。すべての埋め込み設定の編集が終わったら、保存ボタンを押してください。
⚠️注：動画にカードを追加すると、いいね・後で見る・共有のコントロールが無効になります。
カードの表示
カードを使用した動画の視聴体験は、動画が共有されているプラットフォームと視聴に使用されているデバイスによって異なります。
⚠️ 注：カードは、水平モード（標準プレーヤー）で幅 600ピクセル以上、垂直モード（高さが幅よりも大きいプレーヤー）で幅 225ピクセル以上のプレーヤーでのみ表示されます。
カードは動画の右上に最初に表示され、同じウィンドウに他のカードを追加していない限り、6秒間固定表示されます。カード付きの動画は埋め込まれているどの場所でもインライン再生になります。プライバシー設定が「プライベート」または「限定公開」の場合、Vimeoの動画ページにも表示されます。
Wix、Squarespace、Wordpress 上でのカード付きの動画は、モバイルサイトでインライン再生されます。Facebook や Twitter では、モバイルアプリとモバイルサイトが vimeo.com の動画ページにリンクします。
カードのエンゲージメント分析
動画ページの分析パネルから過去 30 日間のカードの視聴数とクリック数を見ることができます。動画インタラクションツールの分析の詳細については、「動画設定の分析パネル」をご参照ください。
ショーケースのカード
カード、および以前に追加した他の動画インタラクションツール（終了画面やお問い合わせフォームなど）がショーケース内に表示されます。ショーケースを共有すると、視聴者がショーケースを閲覧したときにカードが表示されます。詳細はVimeoショーケースをご覧ください。
カード付きの動画の埋め込みコード
通常の Vimeo 埋め込みコードは iframe です。すべての視聴環境でカードをサポートするには、javascript のラッパーを通常の埋め込みコードに追加します。新しい埋め込みコードは応答性が高く、ブラウザのウィンドウサイズが変わっても、プレーヤーの元のアスペクト比を維持できます。埋め込みコードのサンプル例は下記をご参照ください。（Javascript のラッパーは太字表記です）
<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 のラッパーを含めた形でアップデートする必要があります。動画にカードを追加した後、[埋め込み] 設定のプレーヤープレビューの上にある埋め込みコードボタンをクリックすると、新しい埋め込みコードにアクセスできます。
SNS 上でカード付きの動画を上手にシェアする方法
Twitter や Linkedin などのソーシャルプラットフォーム上にカード機能を付けた動画を埋め込む場合は、Vimeoの埋め込みコードの代わりに、Vimeoの動画ページURLを投稿欄に直接貼り付けるだけでシェアできます。
Facebook や Twitter に動画を共有する際、投稿に紐付けるリンクをVimeoの動画ページではなく、自分のサイトにしたい場合は、自身のウェブサイトにいくつかのコードを追加する必要があります。詳細は「ソーシャルメディアプラットフォームへ投稿する際のウェブサイトの最適化」をご参照ください。
カード付き埋め込み動画の活用方法
Wix や Squarespace などのウェブ作成サイトを通して、カードを設定した動画を埋め込む場合、埋め込みコードから javascript ラッパーが抜け落ちていないか確認が必要です。また、動画の埋め込みにウィジェットの使用はお薦めしておりません。
1つのページにカードを設定した複数の動画を埋め込む場合は、javascript タグ <script src="https://player.vimeo.com/api/player.js"></script> だけを自分の動画のどれか1つに追加することをお薦めしています。それに続く埋め込みコードはすべて新しい <div> タグのみを含めます。
JavaScriptbのスクリプトタグを複数回含めると、ページのパフォーマンスに影響が出る可能性があります。
一般的なウェブサイトビルダーを使用してカード付きの動画を埋め込むには、次の手順に従ってください：
- Wix
- Wix サイトのエディタで+ 追加をクリックし、リストの一番下にあるその他をセレクトし、HTML コードオプションを選択します
- ページに表示されたグレーの枠の上にあるコードを入力ボタンをクリックし、設定の編集モードを立ち上げます
- 入力形式でコードが選択されていることを確認し、Javascript ラッパーを含んだ Vimeo の埋め込みコードを貼り付けます
- 青色の更新ボタンをクリックし、変更をサイトに反映させます
- Squarespace
- Squarespace のページから EDIT モードに入り、右上にある + Add アイコンをクリックします
- メニューをスクロールダウンすると More の見出しがあるので </> Code optionを選択します
- Javascript ラッパーを含んだ Vimeo の埋め込みコードを貼り付け、Applyボタンをクリックします
- ページの編集がすべて終了したら、左上にある Save をクリック
- Wordpress
- Wordpress 投稿の HTML 編集タブを選択します
- Javascript ラッパーを含んだ Vimeo の埋め込みコードを貼り付けます
- 準備ができたら、右上にある更新をタップします
- Tumblr
- 投稿タイプから動画を選択します
- ウェブから画像を追加オプションを選択
- Javascript ラッパーを含んだ Vimeo の埋め込みコードを貼り付けます
- Vimeo の埋め込みプレーヤーがロードされ、Tumblr の投稿にテキストを追加するオプションが表示されます
- 準備ができたら、[投稿する] ボタンを押します。