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

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

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

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

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

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

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

CSSに追記する

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

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

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