Facebookの動画埋め込みは、iframeの仕様とも相まってかなりめんどくさいことになる。

とはいえそんなもののためにJSを書きたくはないのでCSSだけでなんとかしたい。

Facebookの動画埋め込みはデバイスサイズによってサイズが変わる

Facebookの動画埋め込みはスマートフォンなどのデバイスサイズ時にアスペクト比をうまいこと変えてくれる。

とは言え、これはwidthとheightを明確に決めたiframeの挙動と相まって余計な余白が出たりしてしまう。

再現させてみる

どういうことかというと、

デザインが崩れる前のFacebook埋め込み

こんな感じのページがあったとする。

これをスマホサイズにすると、

デザインが崩れたFacebook埋め込み

こうなってしまう。

横幅は100歩譲っていいとしても、縦幅に余白ができてしまうのはちょっと避けたい。

ちなみにこのコードは以下。

<style>
  .container {
    max-width: 40rem;
    margin: 0 auto;
  }
  .fb-embed-container {
    background-color: #333;
  }
</style>

<div class="container">

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

  <div class="fb-embed-container">
    <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2F186362861769611%2Fvideos%2F186450125094218%2F&show_text=0&width=400" width="400" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
  </div>

  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

</div>

CSSだけでFacebookの動画埋め込みをレスポンシブにする

ネットで調べても同様の事象で困ってる人はあんまりいないようだった。

「iframeをレスポンシブに」みたいなのは見つかるけどJSだしjQueryだしでそんなの使いたくない。

Facebookの動画埋め込みはスマホ時に16:9になる

Facebookの動画埋め込みのiframeにはこんなタグがある。たぶんこいつがサイズを決めてる。

<i class="img _53mz _4s0y" style="background: url(&quot;https://scontent-nrt1-1.xx.fbcdn.net/v/t15.0-10/fr/cp0/e15/q65/14694198_186450581760839_783523663969255424_n.jpg?efg=eyJpIjoidCJ9&amp;oh=7d6b5ef3309822cc35998af7d0cb0d91&amp;oe=58985018&quot;) no-repeat center;background-size:auto 100%;-webkit-background-size:auto 100%;padding-bottom:56.25%;"></i>

インラインスタイルを見て分かる通り、padding-bottom:56.25%が設定されている。 というわけで、横幅が400pxの場合は225pxになる。

なので親要素をうまいことそのサイズでぶつっと切ってしまえばいけるはず。

こんなCSSで実現できる

スマホ時にはiframeは横幅いっぱいになってもらわないと困るので、width: 100%positionをいじってしまえばなんとかなった。

<style>
  .container {
    max-width: 40rem;
    margin: 0 auto;
  }
  .fb-embed-container {
    background-color: #333;
  }
  @media (max-width:  1024px)  {
    .fb-embed-container {
      position: relative;
      padding-bottom: 56.25%;
    }
    .fb-embed-container iframe {
      position: absolute;
      width: 100%;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  }
</style>

でもAMPを適用している場合はこの問題は解決できない。

なんか包含しているタグとかの関係でiframeが描画されたりされなかったりするみたい。