Vimeoの動画・ライブをWebサイトに限定公開で埋め込む方法【Vimeo(ビメオ)の使い方】

アーカイブ動画（録画した動画）やライブ配信を自分たちが所有しているWebサイト上でしか視聴できないようにしたい・特定の対象に限定配信したいとお考えの方もいらっしゃるのではないかと思います。

Webサイトに動画再生プレイヤーを埋め込み、同サイト上でのみ動画視聴できるようにする
会員制のWebサイトに動画コンテンツを用意して、会員のみが視聴できるようにする

など動画共有サイトのVimeoには、お持ちのサイトに動画やライブを限定公開で埋め込む機能があります。

アップロードした動画を配信したり、ライブ配信が行える機能
動画やライブの再生プレイヤーを埋め込みコードでWebサイトに埋め込める機能
Webサイトに埋め込んだ動画やライブを同サイト上でしか視聴できないようにする機能

など Vimeoが提供するこれらの機能を使うことで、たとえば、

企業HPで配信する会社やサービスのPR動画を同サイト上でのみ視聴できるようにする
オンラインサロンやファンクラブサイトなどの会員制サイトで会員だけが動画コンテンツを視聴できるようにする

といったことが実現できます。 Vimeoの動画をWebサイトに埋め込むと次のような動画再生プレイヤーがページに表示され、動画を視聴できるようになります。

上記の動画の埋め込みコードは次のものになりますが、この動画は本ブログでしか視聴できない設定にしているため、以下の埋め込みコードを本ブログ以外のWebサイトのページに貼り付けても動画は視聴できません。

<iframe src="https://player.vimeo.com/video/572430459" width="640" height="360" frameborder="0"></iframe>

また、本ブログが会員制サイトの場合は、会員でないと当ブログで動画を視聴することができないということになります。補足ですが、埋め込みコード内の動画再生プレイヤーのURLに直接アクセスしても動画再生プレイヤーは表示されません。「https://player.vimeo.com/video/572430459」本稿では、Vimeoの動画・ライブをWebサイトに埋め込む方法とそれらをプライベートな配信にする設定方法について紹介します。

Vimeoには無料と有料のプランがありますが、企業や個人が Vimeo で商用コンテンツを配信する場合は、有料のProプラン以上のアカウントが必要です。また、ライブ配信は有料のPremiumプランで利用できるようになります。各プランの詳細はVimeoの公式サイトをご確認ください。なお、本記事ではPremiumプランを利用しています。

＼ライブ配信を実施する際に役立つノウハウガイドをお配りしています／

資料をダウンロードする

動画の埋め込み方法
ライブ配信の埋め込み方法
動画とライブの限定公開・販売サイト構築システム『ソーシャルキャスト』
1. ソーシャルキャストの特徴

動画の埋め込み方法

ここでは、動画を限定公開でWebサイトに埋め込む設定方法を解説します。

Vimeoに動画をアップロードする

まずは、PCのブラウザでVimeoの管理画面にログイン後、動画をアップロードします。管理画面右上の「新しい動画」にカーソルを合わせ「アップロード」をクリックします。ドラッグ＆ドロップで動画ファイルをアップロードします。動画の容量により時間がかかることがありますので、終了するまで待ちます。その間にタイトル、概要、サムネイル画像の設定などが行えます。アップロードが完了したら、「保存ボタン」で保存します。

Vimeoにはスマホアプリがあり、アプリからVimeoに動画をアップロードすることもできます。（Android版のVimeoアプリ・iOS版のVimeoアプリ）

動画のプライバシー設定を行う

次に動画の公開範囲などのプライバシーに関する設定を行います。 アップロードした動画の「詳細設定」をクリックすると、動画の詳細設定画面に遷移します。左側の「一般」メニューの中にある「プライバシー」という項目から設定を行うことができます。以下で、各設定項目について解説します。

「誰が視聴することができますか？」の設定

この項目では、動画を視聴できる人を限定する・しないなどの設定が行えます。設定項目はいくつかありますが、特定のWebサイトでのみ視聴できるようにしたい場合は、次の設定を選択するとよいでしょう。

Vimeoで非表示にする（vimeo.com上で動画を視聴することができなくなります）

「どこに動画の埋め込みを許可しますか？」の設定

この項目では、動画の埋め込みを許可する・しないなどの設定が行えます。今回の場合は、動画を埋め込むWebサイトを限定する必要がありますので、特定のドメイン（複数のドメイン指定が可能）を選択し、埋め込み先のWebサイトのドメインを指定しましょう。 たとえば、本ブログ（ https://socialcast.jp/posts/ ）に動画を埋め込む場合は、「 socialcast.jp 」を指定します。

その他の動画のプライバシー設定

今回の場合は、特定のWebサイト上でのみ動画を視聴できるようにするため、一般公開する動画の場合に必要になるような、vimeo.com上でのコメント許可や動画のダウンロード許可などの機能はすべて無効にします。

「誰がコメントできますか？」の設定：誰もできない
「この動画のダウンロードを許可する」の設定：OFF
「コレクションへの追加を許可する」の設定：OFF

もろもろの設定が完了したら、「保存ボタン」で保存します。

動画の埋め込み設定を行う

次にWebサイトに埋め込んだ動画再生プレーヤーの表示項目に関する設定を行います。 たとえば、視聴者が動画の音量調整や再生速度調整を行えるようにするかどうかなどを設定します。上記はWebサイトに埋め込んだVimeoの動画再生プレイヤーですが、たとえば、左上のプロフィール情報や右上の共有ボタン、右下のvimeoのロゴマークなどは消したい場合もあるかと思いますので、以降の設定で、これらの項目も表示・非表示を設定していきます。 Vimeo管理画面の動画詳細設定画面左側にある「埋め込み」をクリックします。以下で、各設定項目について解説します。

ここまで行ったのプライバシー設定の内容などによって、ONにしても表示されない項目などもありますので、必要に応じて、Vimeoのヘルプセンターなどを参考にしながら、設定を行ってください。

「コントロール」の設定

この項目では、動画再生プレイヤーの音量調整機能やスピードコントロール機能の表示・非表示などの設定が行えます。 コントロールの項目はすべてONに設定してよいかと思います。 動画の音量や再生スピードを調整できるのは、視聴者にとって便利だからです。

再生バー	ONにすると、再生ボタンや再生バーが表示されます。
音量	ONにすると、音量を調整機能が表示されます。
スピードコントロール	ONにすると、動画の再生速度調整機能が表示されます。（0.75倍や2倍など）
全画面	ONにすると、動画再生プレイヤーの全画面表示切り替えボタンが表示されます。

「メニュー」の設定

この項目では、動画の共有ボタンや埋め込みボタンの表示・非表示などの設定が行えます。 設定の中でも共有や埋め込みは、動画の限定公開では避けた方がよいと思いますので、OFFにしておきましょう。

いいね	ONにすると、画面上にハートマークの「いいね」ボタンが表示されます。
後で見る	ONにすると、画面上に時計マークの「後で見る」ボタンが表示されます。
共有	ONにすると、画面上に紙飛行機マークの「共有」ボタンが表示され、 SNSなどへの共有ができるようになります。
埋め込み	ONにすると、画面上に紙飛行機マークの「共有」ボタンが表示され、動画の埋め込みコードが取得できるようになります。 ※プライバシー設定で動画の埋め込み許可をしていない場合は表示されません。

「あなたの詳細」の設定

この項目では、動画再生プレイヤーにVimeoアカウントのプロフィール情報を表示する・しないなどの設定が行えます。動画再生プレイヤー上に表示されるプロフィールアイコンや動画タイトルのリンクをクリックすると、Vimeoのページに飛んでしまうため、すべてOFFにしておきましょう。

プロフィール画像	ONにすると、Vimeoアカウントのプロフィール画像が表示されます。
タイトル	ONにすると、Vimeoで設定した動画のタイトルが表示されます。
投稿者	ONにすると、Vimeoの動画投稿者名（Vimeoのアカウント名）が表示されます。
ユーザーが選べるようにする	動画を埋め込む際にユーザーが表示内容を決められるようにするかどうかの設定です。

「カスタマイズ機能」の設定

この項目では、動画再生プレイヤーのパーツカラーや任意のロゴ画像・ロゴ画像クリック時のリンク先URLなどの設定が行えます。カスタムカラーやカスタムロゴはやお好みで設定しましょう。 Vimeoのロゴは非表示にした方が、オリジナルの動画感が出ると思います。

カスタムカラー	ONにすると、動画再生プレイヤーに表示される音量調整機能などのパーツのカラー変更ができます。
Vimeoのロゴを表示する	ONにすると、動画再生プレイヤー上にVimeoのロゴが表示されます。
カスタムロゴを表示する	ONにすると、動画再生プレイヤーの右下に任意のロゴ画像を表示できるようになります。また、再生中にロゴを表示するかどうか・ロゴクリック時のリンク先URLも設定できるようになります。

もろもろの設定が完了したら、「保存ボタン」で保存します。

動画にチャプターをつける

Vimeoには動画にチャプターをつける機能があります。特に30分や1時間以上の長尺の動画の場合は、動画にチャプターを設定しておくことで、視聴者が自分の見たい箇所にジャンプできるため、利便性が上がります。弊社でも動画やライブの販売・限定配信をテーマにした1時間～程度のセミナーを開催していますが、そのセミナーのアーカイブ配信などでチャプターを設定して、視聴者の方が視聴しやすいように工夫しています。チャプター機能は動画教材やセミナーなどの学習系コンテンツだけでなく、映画や多数の出演者が登場する音楽ライブの動画などでも活用できるかと思います。

「チャプター」の設定

この項目では、アップロードした動画にチャプターを設定する方法について解説します。 Vimeo管理画面の動画詳細設定画面左側にある「インタラクションツール」の「チャプター」をクリックします。 動画を再生しながらチャプターを入れたい箇所の時間（何分何秒）と、チャプターのタイトルを入力します。 チャプターの数は動画1つに対し、100チャプターまで、チャプターのタイトルは50文字以内の制限があります。 チャプターを追加すると動画の再生バーにポイントがついて、ポイントをクリックすると、特定箇所にジャンプすることができます。 また、動画右下のチャプターアイコンをクリックすると、目次の形でチャプター一覧が表示されます。 設定が完了したら、「保存ボタン」で保存します。

動画の共有リンクをサイトのページに貼り付ける

一通り設定が完了したら、Webサイトに動画を埋め込むためのリンクをコピーします。 Vimeo管理画面の動画詳細設定画面の右上にある、「共有」＞「埋め込みコードをコピー」をクリックすると、動画の埋め込みコードが取得できますので、それをWebサイトのページに貼り付けましょう。埋め込みコード（HTMLタグ）に記述されている動画の横幅・縦幅の設定は自由に変更することができるため、埋め込むWebサイトのPC表示やスマホ表示の仕様にあわせて調整するとよいでしょう。なお、Webサイトに動画を埋め込んだ後にVimeo管理画面で動画の設定を変更しても、動画リンクなどは変更されないため、動画の設定変更の都度、Webサイトのリンクを貼り直したりする必要はありません。

動画を埋め込んだページのサンプル

ここまでの設定を行うと、冒頭で紹介したような形で動画をWebサイトに埋め込むことができます。

＼ライブ配信を実施する際に役立つノウハウガイドをお配りしています／

資料をダウンロードする

ライブ配信の埋め込み方法

次にVimeoのライブ配信を限定公開でWebサイトに埋め込む方法を紹介します。 Vimeoでは有料のPremiumプランを契約すると、録画した動画の配信に加えてライブ配信・チャットも行えるようになります。ライブ配信の埋め込みも動画とほぼ同じような設定で、限定公開にすることができます。

ライブ配信を行うには別途、PCやソフトウェアエンコーダーと呼ばれる専用のソフト（OBS Studioなど）を使う必要があります。PCとOBS Studioを使って、Vimeoでライブ配信を行う流れはVimeoでライブ放送を行う方法の記事ご覧ください。

Vimeoでライブ放送を行う方法

今回はVimeoを利用したライブ放送の具体的な方法をまとめます。本記事はPCを利用してライブ放送を行う方法を記載しています。 VimeoのPremiumプランを契約する Vimeoでライブ放送を行うには、有料プランのPremiumプ...

イベントの設定を行う

Vimeoではライブ配信をライブイベントと表現しています。 以下では、ライブイベントの新規作成から限定公開の設定までの流れを解説します。

ライブイベントの新規作成

まずは、ライブイベントを新規作成しましょう。 Vimeo管理画面の左側「ライブイベント」＞「ライブイベントを作成」をクリックします。イベント名を入力し、「次へ」をクリックします。

「イベント」タブの設定

ライブイベントの新規作成後、ライブイベントの設定詳細画面に移動し、設定を行っていきます。この項目では、弊社がVimeoのライブ配信を使って、実際にオンラインセミナーを実施する際の設定をメインに紹介します。 「イベント」タブの項目の内、「チャット」と「視聴のプライバシー設定」を設定します。

リンク	Vimeoのライブ配信視聴ページのURLです。今回はWebサイトにライブ配信を埋め込むため、利用しません。
チャット	Vimeoはライブ配信用のチャット機能も提供しているため、チャットを利用する場合はONにします。
視聴のプライバシー設定	特定のWebサイトでのみライブを視聴できるようにしたい場合は、 Vimeoで非表示にする（vimeo.com上でライブを視聴することができなくなります）を選択するとよいでしょう。

変更した設定は自動的に保存されます。

イベントの埋め込み設定を行う

ライブ配信の埋め込みに関する設定を行っていきます。

「埋め込み」タブの設定

この項目では、ライブ配信の埋め込みを特定のWebサイトのみに許可するかどうかや、ライブ配信の再生プレイヤーに表示するメニューなどの設定を行います。「埋め込み」タブには様々な設定項目がありますが、ライブ配信を限定公開でWebサイトに埋め込む場合は、「プライバシー設定を埋め込む」、「動画管理」、「カスタマイズ機能」の設定を行い、その他の設定項目はOFF（利用しない）に設定すればよいかと思います。

もちろん、状況にあわせて設定が必要になる項目もあるかと思いますので、Vimeoのヘルプセンターなどを参考に設定を行ってください。

プライバシー設定を埋め込む	「特定のドメイン」を選択し、ライブ配信を埋め込むWebサイトのドメインを設定します。
動画管理	視聴者の利便性の観点から再生バー・音量調節・全画面表示ボタンはあった方がよいので、 ONにしておきましょう。
カスタマイズ機能	「Vimeoのロゴを表示する」をOFFにすると、オリジナルのライブ感が出ます。「色をカスタマイズする」・「カスタムロゴを表示する」はライブ配信の再生プレイヤーのパーツカラーを変更したい場合や、自社のロゴをライブ配信の再生プレイヤーに表示したい場合はに設定しましょう。

ライブ配信とチャットをサイトのページに埋め込む

設定が完了したら、ライブ配信用の再生プレイヤーとチャットの埋め込みコードを取得して、Webサイトに埋め込みましょう。「埋め込み」タブにある、「イベント埋め込みコード」はライブ配信の再生プレイヤーの埋め込みコード、「チャット埋め込みコード」はライブ配信用のチャットの埋め込みコードです。必要に応じてそれぞれのボタンをクリックして埋め込みコードを取得します。 ライブ配信の再生プレイヤーの埋め込みコード

ライブ配信用のチャットの埋め込みコード 各埋め込みコードの「コードをコピー」をクリックして取得した埋め込みコードをWebサイトのページに貼り付けます。

ライブ配信を埋め込んだページのサンプル

ここまでの設定を行うと、ライブ配信用の再生プレイヤーとチャットをWebサイトに埋め込むことができます。 ライブ配信用の再生プレイヤー（サンプル画面）

ライブ配信用のチャット

動画とライブの限定公開・販売サイト構築システム『ソーシャルキャスト』

弊社が提供している『ソーシャルキャスト』は、様々なタイプの動画配信サービスを構築できる「動画サイト構築システム」です。 2012年のサービス開始以来、350サイト以上の動画配信サービスに採用されています。

ソーシャルキャストの特徴

特定のユーザーに動画やライブを限定配信する仕組みがある
動画とライブの販売機能が豊富（サブスクリプション方式の販売、単品販売・セット販売）
入力するだけで動画コンテンツが視聴できるようになる視聴チケットを発行できる
構築した動画サイトのデザインを自由に変更できる
独自ドメインが利用できる
機能追加や大規模配信にも対応している
技術的知識なしでも簡単に使える管理画面でサイト運営することができる

また、本稿で紹介したVimeoから発行される動画やライブの埋め込みコードを使って、ソーシャルキャストで動画コンテンツの限定公開や販売を行うこともできます。ソーシャルキャストの機能詳細・導入事例は公式サイトをご確認ください。

動画とライブの販売・限定公開システム｜ソーシャルキャスト

ソーシャルキャストを利用すれば、動画やライブ配信の販売・限定公開・動画共有をマルチデバイス対応で実現できます。優れた動画配信プラットフォームが簡単に構築でき、低コストに運営することが可能です。

＼ライブ配信を実施する際に役立つノウハウガイドをお配りしています／

資料をダウンロードする