Facebookの投稿の埋め込みでレスポンシブ対応をしたい

Question

レスポンシブ対応したウェブサイトを制作しています。

記事を投稿する機能を備えたものなのですが、Facebookの投稿の埋め込みをした時に、画面サイズに応じて縦横比を維持することができません。

例えば「<iframe width="500" height="500"/>」という埋め込みの場合、スマホ時には横幅が飛び出してしまうので、CSSで「max-width: 100%」を指定すると、高さが500のままなので、下に大きな空白ができてしまいます。

YouTube埋め込みの時には、iframeの上にdivを挟んで16:9を維持することはできるのですが、Facebookの埋め込みは投稿毎に縦横比が異なるので同じ手法を使うことができません。

Facebook埋め込みは頻繁に使うこともあって、ユーザビリティ的にも縦横比を維持して、しっかりとレスポンシブ対応をしたいのですが、同じような対応をされた方、解決法をご存じの方はぜひご回答いただけないでしょうか。

よろしくお願いします。

※追記

「Facebookの埋め込み」と当初表記していましたが、正しくは「Facebookの投稿の埋め込み」でした。
分かりづらい表現で投稿してしまい、申し訳ございません。

Comments

[m.ts10806]

「Facebookの埋め込み」というのは具体的に何をさしていますでしょうか？内容によりますがiframe以外で対応した方がいいかもしれません。

Answer 1

ブロックの比率をキープするなら、以下のページが参考になるかもしれません。

【CSSテクニック】ブロック要素の比率を維持しながら可変し、文字も可変させる方法

文字も…ってところは読み飛ばしで。