HAM MEDIA MEMO

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

h2ham

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に入れた属性と同じサイズを入れておくのがよさそうです。

参照：