埋め込み動画とライブ動画プレイヤー

埋め込み動画プレイヤーを使用すると、ウェブサイトに簡単にFacebook動画とFacebookライブ動画を追加できます。動画またはライブ動画のソースには、Facebookページや個人のタイムラインで投稿された公開動画を使用できます。

埋め込み動画プレイヤー構成ツールコードサンプル設定コードの手動追加

手順

1. URLまたはFacebookページを選択する

埋め込むFacebook動画のURLを選択します。

2.コード設定ツール

埋め込み動画プレイヤーのコードを生成するには、URLをコード構成ツールに貼り付け、[コードを取得]ボタンをクリックします。

3.HTMLスニペットをコピーして貼り付ける

スニペットをコピーし、目的のウェブサイトのHTMLに貼り付けます。

埋め込み動画プレイヤー構成ツール

動画のURL

動画のピクセル幅

投稿全文を含める

コードを取得

詳細なコードの例

コードサンプルをコピーして自分のウェブサイトに貼り付けてください。data-hrefの値を動画のURLに変更します。プレイヤーのサイズを変更する場合は、data-width属性を使用します。

<html>
<head>
  <title>Your Website Title</title> 
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

  <!-- Your embedded video player code -->
  <div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-width="500" data-show-text="false">
    <div class="fb-xfbml-parse-ignore">
      <blockquote cite="https://www.facebook.com/facebook/videos/10153231379946729/">
        <a href="https://www.facebook.com/facebook/videos/10153231379946729/">How to Share With Just Friends</a>
        <p>How to share with just friends.</p>
        Posted by <a href="https://www.facebook.com/facebook/">Facebook</a> on Friday, December 5, 2014
      </blockquote>
    </div>
  </div>

</body>
</html>

設定

上述の構成ツールには、埋め込み動画プレイヤーで使用できる一部の設定が含まれていません。次のような設定も変更できます。

設定	説明	デフォルト
`data-href`	動画の絶対URLです。	`n/a`
`data-allowfullscreen`	動画のフルスクリーンモードでの再生を許可します。`false`または`true`を指定できます。	`false`
`data-autoplay`	ページの読み込み時に動画の再生を自動的に開始します。動画は音声なし(ミュート)で再生されます。音声は動画プレイヤーのコントロールからオンにできます。この設定はモバイル機器には適用されません。`false`または`true`を指定できます。	`false`
`data-lazy`	`true`を指定すると、`loading="lazy"` iframe属性を設定してブラウザーの遅延読み込みメカニズムを使用します。こうすると、プラグインがビューポートの近くにない場合、ブラウザーはプラグインをレンダリングしないので、プラグインは表示されないかもしれません。`true`、`false` (デフォルト)のいずれか1つを指定できます。	`false`
`data-width`	動画表示枠の幅です。最小値`220px`。	`auto`
`data-show-text`	動画に関連するFacebook投稿がある場合は、`true`に設定してそのテキストを追加します。デスクトップサイトでのみ可能	`false`
`data-show-captions`	`true`に設定すると、デフォルトでキャプションを表示します(該当する場合)。キャプションはデスクトップでのみ利用できます。	`false`

構成例

<div class="fb-video"
  data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
  data-width="500"
  data-allowfullscreen="true"
  data-autoplay="true"
  data-show-captions="true"></div>

動画投稿からのコードの取得

1.動画投稿を開く

自分で投稿した公開動画の場合は(「よくある質問」を参照)、動画投稿そのものから埋め込みコードを直接取得できます。

オプションメニューから[Embed Video]を選択します。

動画をフルページビューで視聴している場合は、右下の[Embed Video]ボタンを選択します。

Facebookページのみ

公開動画をFacebookページに投稿している場合は(「よくある質問」を参照)、埋め込みコードをタイムラインから直接取得できます。Facebookの投稿の右上に表示されるアイコンをクリックします。

ドロップダウンメニューから[Embed Video]を選択します。(Facebookページのみ)。

2.コードをコピーして貼り付ける

動画投稿を埋め込むためのコードが記載されたダイアログが表示されます。このコードをコピーし、ウェブページ内で投稿を表示させたい場所にコードを貼り付けます。

技術的な詳細については、「コードの手動追加」セクションをご覧ください。

コードの手動追加

コードジェネレーターを使用しなくても、コードを手動で埋め込むこともできます。

1.動画投稿のURLを取得する

まず、シェアする動画投稿のURLを取得する必要があります。公開された動画投稿からのみURLを取得できます(「よくある質問」を参照)。公開された動画投稿であれば、投稿日時のすぐ横に、次のような地球儀のアイコンがグレーで表示されています。

次のサンプルURLを使ってテストすることもできます。

"https://www.facebook.com/FacebookDevelopers/videos/10152454700553553/"

2.JavaScript SDKを読み込む

埋め込み動画プレイヤープラグインや他のソーシャルプラグインを使用するには、ウェブサイトにFacebook JavaScript SDKを追加する必要があります。ページへのSDKの読み込みは1度だけで構いませんが、次のように<body>タグを開いた直後にSDKを読み込むように設定することをおすすめします。

<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

JavaScript SDKの実装方法に関する詳細は、「JavaScript SDK - Quickstart (JavaScript SDK - クイックスタート)」をご覧ください。

3.埋め込み動画プレイヤータグを配置する

次に、ウェブサイトの任意の場所に埋め込み動画プレイヤータグを配置します。{your-video-post-url}は投稿のURLに置き換えます。

<div class="fb-video" data-href="{your-video-post-url}"  
  data-allowfullscreen="true" data-width="500"></div>

4.テスト

ここまでの手順を終えたら、埋め込み動画プレイヤーをテストできます。すべてを統合すると次のようなコードになります。

<html>
  <title>My Website</title>
<body>
  <div id="fb-root"></div>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
  <h1>My Video Player</h1>
  <div class="fb-video"
    data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
    data-width="500"
    data-allowfullscreen="true"></div>
</body>
</html>

テストサンプルでは次のスクリーンショットのような画面が表示されます。

5.カスタマイズする

サイズ、言語、その他の設定を変更する場合は、このページに後述されている手順に従います。

動画投稿のURLの取得

埋め込みコードがCMSによって生成されるケースでは、未加工の投稿URLのみが必要です。投稿のURLの取得には、次の2つの方法があります。

ブラウザーのアドレスバーからパーマリンクのURLをコピーする。
投稿の投稿日時を右クリックし、リンクアドレスをコピーする。

これらの方法の該当箇所は次のスクリーンショットに赤線でハイライト表示されています。

Graph API経由

埋め込み動画プレイヤーをウェブサイトに自動的に統合する場合、Graph APIを使用して動画を集約させることもできます。たとえば、Page Videos APIエンドポイントを使用すると、/{page-id}/videosへのリクエストに対して次のような形式(短縮版)の応答が送信されます。

{
  "data": [
    {
      "id": "1234567890",
      "created_time": "2015-02-25T23:22:06+0000",
      "description": "My Video Caption",
      "embed_html": "<iframe src=\"https://www.facebook.com/video/embed?video_id=1234567890\" width=\"1280\" height=\"720\" frameborder=\"0\"></iframe>",
      "format": []
    }
   ]
}

動画のURLを取得するには:

id値を使用して、次の構造に合わせてURLを作成します。

"https://www.facebook.com/video.php?v={id}"

動画の埋め込みには、embed_htmlプロパティを使用しないでください。このトピックに関する詳細は、「よくある質問」セクションをご覧ください。

デスクトップ版のレイアウト

デスクトップ版の埋め込み動画プレイヤーの幅は、次のサンプルにあるように、埋め込み動画プレイヤータグのdata-width属性を使って変更できます。最小値は220です。上限値に制限はありませんが、プレイヤーが親要素よりも大きく表示されることはありません。

プラグインのサイズの変更にはCSSスタイルタグを使用しないでください。表示エラーが発生することがあります。

<!-- WRONG! -->
<style type="text/css">
.fb-video {
  width: 500px;
}
</style>
<div class="fb-post" data-href="{your-video-post-url}"></div>

<!-- CORRECT -->
<div class="fb-video" data-href="{your-video-post-url}"
  data-allowfullscreen="true" data-width="500"></div>

フルスクリーン

data-allowfullscreen="true"プロパティを追加することで、動画のフルスクリーンモードでの再生が可能になります。

携帯サイト版のレイアウト

携帯サイトでは、埋め込み動画プレイヤーのサイズがその親要素の内側の幅に合わせて自動的に調整されます。

言語を切り換える

Facebook JavaScript SDKのローカライズバージョンを読み込むことで、埋め込み動画プレイヤープラグインの言語を変更できます。SDKを読み込むときに、srcの値を変更して、自分のロケールが使用されるようにします。たとえば、フランス語(フランス)の場合は、ロケールのen_USをfr_FRに置き換えます。

src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v3.2"

使用する言語によっては、ソーシャルプラグインの幅の調整が必要になる場合があります。詳しくは、「ローカライズと翻訳」ページをご覧ください。

WordPress

WordPressサイトでJavaScript用Facebook SDKをすでに使用している場合は、投稿にfb-videoタグを追加することで、埋め込み動画プレイヤープラグインを使用できます。

<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" 
  data-width="500" data-allowfullscreen="true"></div>

Facebook SDK for Javascriptを使用していないWordPressサイトに、各動画投稿から取得できるスニペットをコピーして貼り付ける方法で動画を埋め込むと、多くの場合、埋め込み動画プレイヤープラグインが表示処理を行いません。これは、WordPressではすべての&文字が#038;に変換されてしまい、プレイヤーが正しく認識されなくなることが原因です。

回避策として、次のコードを使用してプラグインを追加します。

<script>window.fbAsyncInit = function() {
  FB.init({
    xfbml      : true,
    version    : 'v3.2'
  });
  }; (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" data-width="500" data-allowfullscreen="true"></div>

今後、WordPressとより簡単に統合するための新たな方法がリリースされる予定です。

よくある質問

Graph API `video`の`embed_html`プロパティを使用することはできますか。

できません。embed_htmlプロパティは使用しないでください。代わりに、埋め込み動画プレイヤープラグインを使用してください。

`embed_html`プロパティについて:

Graph APIエンドポイントvideoには、embed_htmlという名前のプロパティがあります。この値には、ウェブページに埋め込んで、リクエストされた動画を再生するためのHTML要素が含まれます。

この値を埋め込み動画プレイヤープラグインと混同しないでください。今後はこのプロパティを使用せず、代わりに埋め込み動画プレイヤープラグインを使用することをおすすめします。

embed_htmlプロパティを使用すると、動画プレイヤーに次のような不具合が発生します。

モバイル機器やタブレットで動作しない
再生数、動画のタイトルなどの追加情報が表示されない

`embed_html`プロパティの例(現在は利用できません):

{
  "embed_html": 
    "<iframe 
      src=\"https://www.facebook.com/video/embed?video_id=1234567890\"
      width=\"1280\" 
      height=\"720\"
      frameborder=\"0\">
    </iframe>"
}