2018年1月19日 / 最終更新日 : 2021年6月9日対馬俊彦 SNS

Facebook の動画をサイトに埋め込む方法

2021.6.9 追記

Facebook から動画を削除しましたので、この記事で動画が表示されなくなっています。

サイトに動画を埋め込むときには YouTube を使うのが定番ですが、Facebook に投稿した動画も YouTube と同じような操作手順でサイトに埋め込むことができます。

埋め込む手順は以下の通りです。

まず、Facebook の動画再生画面で […] ⇒ [埋め込む] をクリックします。

画面に表示されるコードをコピー＆貼り付けするだけです。YouTube に比べるとシンプルでかんたんですね。

貼り付けた動画は以下のようになります。

【補足】スタイルシートにより見た目を調整

このブログではスタイルシートを設定して以下の調整を行っています。

動画を中央揃えする。
スマホでも画面からはみ出さないようにする。

追加したスタイルシートは以下の通りです。.entry-body の部分は使用するテーマなどに合わせて変更してください。

.entry-body iframe {
margin: 15px auto;
display: block;
max-width: 100%;
}

サイト運営者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら