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追記をします。