SlideShare の埋め込み表示をレスポンシブ対応させ

このエントリーをはてなブックマークに追加

先日 WordCmap に参加して 『WordCamp Tokyo 2014 北海道・札幌からの参加レポート』 というのを書きましたが、気づけばスマホでサイズのはみ出しが起こっていてページ右側に余白ができていました。

SlideShare の埋め込みをレスポンシブの対応を指定なかったためですが、以前、Youtube の埋め込みをレスポンシブ対応したように（参照：Youtube 動画の埋め込みをCSSでレスポンシブ対応する方法） SlideShare もレスポンシブ対応で入れられるようにしてみようと思います。

Youtube 動画の埋め込みをCSSでレスポンシブ対応する方法

SlideShare の埋め込みをレスポンシブ対応するCSS

レスポンシブの対応をいれていないと、iframeのwidth属性までサイズをとってしまうため、はみ出てしまいます。

レスポンシブ対応で解決するためには以下のスタイルを追加します。

HTML

<div class="slideshare">
  〜埋め込みコード〜
</div>

CSS

.slideshare {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: xx%;
}
@media screen and (max-width: xxxpx) {
  padding-bottom: xx%;
} 
.slideshare iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: 478px;
  max-height: 400px;
}

デモ

padding-bottomのパーセンテージは入れる親ボックスによってだいぶ変化があるため、ここでは記載しないでおきます。@mediaも必要な場合には調整用としていれておくのが良さそうです。

これでスマートフォンの表示も右側に余白がつかなくなりました。

親要素側のpaddingはbottomでもtopでも大丈夫です。iframe側のmax-widthとheightはなくても表示されますが、初期に読み込んだ値サイズ以上に広がる可能性もあるので、max-heightとmax-widthはどちらもiframeに入れた属性と同じサイズを入れておくのがよさそうです。

参照：