Vimeo動画をサイトやブログに埋め込む方法、限定公開、埋め込み制限する方法も詳説

オンライン講演のライブ配信やオンデマンド動画の公開ツールとしてよく使われるVimeo。Vimeo上で動画を公開するだけでなく、Vimeoにアップロードした動画をサイトやブログに埋め込むこともできます。本記事では、基本的な埋め込み方法及び埋め込みを限定して公開する方法を解説します。

無料プランと有料プランの違い

Vimeoの埋め込み動画機能は、無料プランと有料プランでそれぞれできることが異なります。

＜無料プラン（Basic）でできること＞

• プレイヤーサイズの変更
• テキストや再生バーの色の変更
• プレイヤーに自分のポートレート、タイトル、動画タイトルを表示する機能のON/OFF

＜有料プランでできること＞

• シェア、いいね、後で見るボタンの表示/非表示
• Vimeoのロゴ、再生バー、音声コントロール、全画面ボタンの表示/非表示
• Webサイトの背景要素として動画を埋め込む、プレイヤーのUIだけを非表示にする（クロムレス）
• 動画再生が終了した後の画面に表示される内容をカスタマイズ
• 動画を表示させられるサイトを指定する
• 埋め込み機能を無効化する
  ※その他、埋め込みプレイヤーの設定を自由にコントロール可能

基本的な埋め込み方法

ここでは、無料プランでできる基本的な埋め込み方法について紹介します。

1. Vimeoにログインし、左上の「新しい動画」アイコンをクリックします。
2.  動画をドラッグ＆ドロップ又は「またはファイルを選択」をクリックし、動画を選択してアップロードします。
3. アップロードが終わると、以下のように動画画像が表示されるので、まずは動画の名前(①)、プライバシーの設定(➁)、埋め込みの制限(③)を選択します。
   ※ここでは全員が視聴できるよう、プライバシーは「一般公開」、埋め込みの設定は「すべてのサイト」としてあります。

【プライバシー設定のオプション】

• 限定公開…リンクを知っている人だけが視聴可能。
• パスワード…パスワードを知っている人だけが視聴可能
• Vimeoで非表示にする(有料会員のみ)…アカウントでは非公開となっているが、どこにでも埋め込みできる
• 一般公開…全ての人が視聴できる。

【埋め込みのオプション】

• すべてのサイト…全サイトに埋め込みできる
• いっさい許可しない…埋め込みを一切できないようにする
• 特定のドメイン(有料会員のみ)…埋め込みできるサイトをドメインで指定できる。

4.左上の「埋め込み」ボタン(①)をクリックし、動画サイズ(➁)を指定。「埋め込みコードをコピー」(③)ボタンをクリックします。

【埋め込みコードのアクセス方法】
埋め込みコードへのアクセスには上記以外にも2つの方法があります。

• 共有ボックス…サイト上のプレイヤー、または公開中の動画ページから「共有」アイコンをクリックする
• 管理ページ…動画の管理ページから、埋め込みたい動画の横にある「共有」ボタンをクリックし、「埋め込みコードをコピー」を選択

【動画サイズ】
デフォルトで取得できる埋め込みコードでは、元の動画と同じアスペクト比を保った動画サイズが自動で組み込まれます。サイズを変えたい場合は、元の動画と同じアスペクト比になるよう注意しながら「width」と「height」の値を変更しましょう。
また、動画の埋め込みコードを取得する際「レスポンシブ」を選ぶと、自動的にレスポンシブ対応の埋め込みコードを取得できます。レスポンシブ対応の埋め込みコードであれば、視聴者の閲覧環境に合わせて、元の動画のアスペクト比を保ったままサイズを変更してくれます。どの埋め込みコードを取得したらいいかわからない、高さや幅の調整機能がわからないという場合は、基本的にレスポンシブ対応の埋め込みコードを取得して貼り付けるのが良いでしょう。

5.ワードプレス等を開き、動画を埋め込みたい場所にコピーした埋め込みコードをペーストします。

貼りつけると下記のような感じで表示されます。

このとき、埋め込みを行った後でVimeoから埋め込みの設定を変更しても、埋め込んだコードが自動で変更できるわけではありませんので、埋め込み設定を変更した場合はコードを貼り付け直しましょう。

詳細な埋め込みの設定(有料プランのみ)

Vimeo動画では、有料プランなら詳細な埋め込み設定ができます。コントロール・メニュー・あなたの詳細・カスタマイズの4つの設定があり、それぞれ以下のような設定が可能です。

コントロール	メニュー	あなたの詳細	カスタマイズ
以下各種機能の表示/非表示 ・再生バー ・音量調整 ・スピードコントロール機能 ・全画面表示切替ボタン	以下各種ボタンの表示/非表示 ・いいね ・後で見る ・共有 ・埋め込み	以下、Vimeoプロフィール情報の表示/非表示、選択 ・プロフィール画像 ・タイトル ・投稿者 ・ユーザーが選べる	以下、外観やロゴ画像などの設定、表示/非表示 ・カスタムカラー ・Vimeoのロゴ ・カスタムロゴ

詳細な埋め込み設定は、動画画面より、右側にある「詳細設定」アイコンをクリックするか、動画の管理画面から動画を選択(①)し、左側の編集メニューの埋め込みタブをクリックします。

①「コントロール」の設定

「コントロール」の各種機能を設定するためには、以下の手順で行います。

1. 画面左側の「埋め込み」から「ウェブ」を選択
2. 「コントロール」を選択
3. 再生バー、音量、スピードコントロール、全画面のスイッチを好みで変更する

これらはいずれもユーザーがコントロールする項目なので、動画の再生速度や画面表示にこだわりがある、など特別な理由がなければONにしたままで構いません。

②「メニュー」の設定

「メニュー」の各種ボタンを設定するためには、以下の手順で行います。

1. 画面左側の「埋め込み」から「ウェブ」を選択
2. 「メニュー」を選択
3. いいね、後で見る、共有、埋め込みのスイッチを好みで変更する

「共有」とはSNSなどに動画を共有するためのボタン、「埋め込み」とは動画の埋め込みコードを取得するためのボタンです。限定動画、有料公開動画などでこれらのボタンを表示しないように注意しましょう。

③「あなたの詳細」の設定

「あなたの詳細」の各種表示/非表示を設定するためには、以下の手順で行います。

1. 画面左側の「埋め込み」から「ウェブ」を選択
2. 「あなたの詳細」を選択
3. プロフィール画像、タイトル、投稿者、ユーザーが選べるようにするのスイッチを好みで変更する

埋め込み動画でプロフィールアイコンや動画タイトルを表示させてしまうと、リンクをクリックしたときにVimeoのサイトに飛んでしまうため、基本的には非表示にしておくと良いでしょう。

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

「カスタマイズ機能」を設定するためには、以下の手順で行います。

1. 画面左側の「埋め込み」から「ウェブ」を選択
2. 「カスタマイズ機能」を選択
3. カスタムカラー、Vimeoのロゴを表示する、カスタムロゴを表示するのスイッチを好みで変更する

カスタムカラーとは、動画再生プレイヤーに表示される音量調整機能など各パーツのカラーを変更できる機能で、お好みで設定しましょう。Vimeoのロゴは非表示に設定しておくと、オリジナル動画であることがわかりやすくなります。

自社サイトや特定のブログのみで限定公開したい場合

自社サイトや特定のブログのみだけで視聴できるようにしたい場合は、プライバシー設定で以下のオプションを選択します。プライバシー設定は動画をアップした時にできますが、アップした後でも動画の編集画面からもできます。その場合は、編集画面の左手にある「一般」➡「プライバシー」タブを選び、オプションメニューを表示させます。
プライバシー設定は以下を選択します。※こちらは有料会員のみが設定できます。

• 誰が視聴することができますか？…Vimeoで非表示にする
• どこに埋め込みを許可しますか？…特定のドメイン
  ※特定のドメインを選択し、自社ドメイン(例https://www.sbrain.co.jp/の場合「sbrain.co.jp」 の部分)を指定します。
• この動画のダウンロードを許可する…オフ
• コレクションへの追加を許可する…オフ

以上のように設定することで、自社サイトや自分のブログ限定で埋め込みができるようになります。視聴者のダウンロードや共有も許可されていませんので、視聴者は指定されたサイト又はブログだけで視聴することができるようになり、外部に動画データが漏出するのを防げます。

Vimeo埋め込み動画が再生できないときの対処法

Vimeo埋め込み動画が再生できないときは、主に以下のような理由が考えられます。

• 動画の埋め込みコードが間違っている
• 動画の公開範囲設定をミスしている
• 対応していないブラウザである

埋め込みコードが間違っている場合

埋め込みコードを取得する際、コピーミスがあった、または取得後、ブログやサイトに貼り付けた際にミスが起こった、などの場合です。埋め込みコードを再取得し、貼り付け直せば対処できます。

公開範囲設定をミスしている場合

動画の公開範囲を「自分のみ」や「フォローしている人のみ」などにしていると、外部への動画埋め込みだけでは閲覧できません。また、埋め込み許可するサイトを指定している場合、正しくブログやサイトのドメインを設定していないと閲覧できなくなってしまいますので、これらの設定を見直してみましょう。

対応していないブラウザの場合

ウェブブラウザが視聴要件に対応していない場合、動画が再生できないことがあります。2022年4月末現在、以下のブラウザに対応しています。

• Chrome 30+ (自動更新付き)
• Firefox 27+（自動更新付き）*
• Internet Explorer 11**
• Microsoft Edge
• Safari 9+ ***

【システム要件】

PC　Windows	Windows8.1以降
>PC　MAC	macOS 10.14（Mojave）以降
Androidモバイル	Android 8.0 (Oreo)以降
iOS / iPad OS	iOS 12、iPad OS 12以降

最新の情報は公式サイトの「視聴・閲覧・アプリのシステム条件」をご覧ください。

Vimeo動画は外部のブログやサイトへ埋め込みを行うことができます。埋め込みに際しては、今回ご紹介したようなさまざまな設定が行えますので、必要に応じて使ってみてはいかがでしょうか。

SBスタッフによるオンライン講演の事例レポート

　他の記事をみる

あわせて読みたい

　他の記事をみる