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

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

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

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

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

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

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

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

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

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

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

投稿者プロフィール

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

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

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

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

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

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

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

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

最新の投稿

この著者の記事一覧

• WordPress2026年1月13日WordPress コアのアコーディオンブロックと詳細ブロックを比較
• WordPress2025年12月3日WordPress 6.9 の新機能 - アコーディオンブロック
• WordPress2025年12月3日WordPress 6.9 の新機能 - 伸縮する見出しと段落
• 制作事例2025年11月26日ホームページ制作事例「有限会社星野工機」

WordPress のトラブル解決・設定・カスタマイズ

ベクトル公式テクニカルパートナー
があなたをお手伝いします

Zoom で画面共有してQ&A形式でサポートいたします。わからないところや疑問点をどんどん質問してください。その場ですぐに解決をお手伝いします。※ご希望の方にはメールでのサポートも可能です。

PHP / jQuery / CSS / アクションフック / フィルターフック のカスタマイズのご依頼も承ります。自分では思い通りにできないのでプロの力を借りたいとお考えの方、ぜひご相談ください。

ご相談・お仕事のご依頼はこちら