FC2ブログで動画などの埋め込みオブジェクト(iframe)サイズを最適化する方法

スマホでブログを見た時に、はみ出さないように、画面サイズに合わせて最適化する（レスポンシブ）方法です。

FC2のオフィシャルデザインのBasic Whiteで検証しましたが、その他のデザインでも適用できるはずです。
youtubeなどの動画だけでなく、GoogleMapなどでも応用できます。

本文のiframe 要素をdiv要素で囲う

まず本文のiframe要素をdiv要素で囲います。

動画を任意サイズではみ出さないようにすることは、iframe要素だけではできません。

ここでは　divタグにYoutubeというクラス名をつけています。
サイズは適当に1280pxにしました。

CSSに追記する

次にCSSに追記する内容です。

.youtube {
  position: relative;
  width: 100%;
}

.youtube::before {
  content:"";
  display: block;
  padding-top: 56.25%;
}

.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

クラス名のところはサンプルではyoutubeにしています。

FC2の設定ではPC用とスマホ用それぞれのCSS追記をします。