背景
僕はWordpressに関してはアサコさんに教えてもらいつつも、基本的に独学でテキトーに行き当たりばったりの毎日。コードの意味もあまりわかりません。そんな素人が先日直面した問題です。「WordpressにFacebook動画を埋め込む」ニーズがあまり無いのでしょう。検索してもあまり有用なページに辿り着けませんでした。最終的に「なんとなく出来た」のでここに解決策を記します。
概要
WordPressにFacebook「ライブ配信イベントで作成した動画２本」「フィードでライブ投稿した動画１本」の合計３本の動画を埋め込むにあたり、Facebook埋め込み動画/ライブで動画プレイヤーにて『JavaScript SDK』でコードを取得し、そこで表示される、ステップ１とステップ２の一部を削除・修正することでなんとかレスポンシブ対応に出来た。※デスクトップPCにての作業
▼該当Wordpressページはこちら
問題
WordPressにショートコードで「ライブ配信イベントで作成した動画２本」「フィードでライブ投稿した動画１本」の合計３本の動画を埋め込んだが、スマホで枠外まで大きく表示されてしまい、レスポンシブ対応にならない。
対策の手順
手順①ライブ配信イベントで作成した動画１本のレスポンシブ対応
手順①-1 埋め込む投稿を開く
この時のURLはこちら。イベントはeventsフォルダ内にて数字で管理されている模様
手順①-2 Facebook投稿画面右上の「···」をクリック→「</>埋め込み」をクリック
手順①-3 「詳細設定」をクリック
手順①-4 Facebook埋め込み動画/ライブで動画プレイヤーが開く
手順①-5 ページ中程の埋め込み動画プレイヤー設定ツールにて「動画のピクセル幅」を消去→「コードを取得」をクリック
手順①-6 『JavaScript SDK』タブ、ステップ１のコードをコピーし、Wordpress本文のすぐ後に貼り付け。
手順①-7 WordPressで動画を表示したい場所にステップ２のコードを貼り付け。
手順②ライブ配信イベントで作成した二つ目の動画のレスポンシブ対応
手順②-1〜5 手順①-5までと同様
手順②-6『JavaScript SDK』タブ、ステップ２のコードをコピーし、Wordpressで動画を表示したい場所に貼り付ける。（ステップ１は不要。ステップ１のコードを貼り付けるとうまくいかなかった。）
手順③フィードでライブ投稿した動画１本を追加、レスポンシブ対応にする
手順③-1〜5 手順①-5までと同様
この投稿のURLはこちら。投稿はvideosフォルダ内にて数字で管理されている模様。（対策①とは違いますね）
手順③-6『JavaScript SDK』タブ、ステップ２のコードをコピーし、Wordpressで動画を表示したい場所に貼り付ける。（このままだとレスポンシブ対応にならない）
手順③-6 対策①で取得した「一本目の投稿におけるステップ２のコード」から下記を参考にハイライト箇所をコピー
「href=”https://www.facebook.com/user名/videos/数字15桁/? idorvanity=数字16桁“
手順③-6 今回埋め込む「３本目の投稿におけるステップ２のコード」の全ての★の部分にペースト「href=”https://www.facebook.com/user名/videos/数字15桁/★“」
所感
理由や仕組みはわかりません。苦笑
現場からは以上です。