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

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

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

手順

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

埋め込む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` (デフォルト)を指定できます。	`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を追加する必要があります。1つのページでSDKを一度だけ読み込む必要があります。<body>タグを開いた直後に読み込むのが理想的です。

<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 - クイックスタートをご覧ください。

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>

Facebookのテストサンプルの結果は、次のスクリーンショットのようになります。

5. カスタマイズする

このページに後述されている手順に従って、サイズ、言語、その他の設定を調整します。

動画投稿のURLの取得

CMSによって埋め込みコードが作成され、未加工の投稿URLだけが必要になる場合があります。投稿のURLを取得する方法は、2つあります。

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

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

グラフ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&amp;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>

JavaScript用Facebook SDKを使用せずに、各動画投稿から取得できるスニペットをコピーして貼り付ける方法で動画を埋め込むと、多くの場合、埋め込み動画プレイヤープラグインのレンダリングが行われません。これは、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>"
}