ブログ記事内に埋め込んだSpeaker Deckのスライドをレスポンシブ対応させる

帯に短し襷に長し

こんにちは、のんピ(@non____97)です。

皆さんはブログ記事内に埋め込んだSpeaker Deckのスライドをレスポンシブ対応させたいなと思ったことはありますか? 私はあります。

普段私はSpeaker Deckのスライドを埋め込みたいときは、Copy iframe embed codeを選択しています。

こちらを選択した場合にクリップボードにコピーされるコードは以下の通りです。

<iframe class="speakerdeck-iframe" frameborder="0" src="https://speakerdeck.com/player/188b0b8353d2414ead79473d216475d9" title="私のAWS愛を聞け！ここが好きだよAmazon FSx for NetApp ONTAP" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" style="border: 0px; background: padding-box padding-box rgba(0, 0, 0, 0.1); margin: 0px; padding: 0px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 40px; width: 560px; height: 314px;" data-ratio="1.78343949044586"></iframe>

こちらを記事内に埋め込んで、PCのブラウザから確認すると以下のように表示されます。

横幅を目一杯使ってほしいのに、余白ができています。

また、スマホのブラウザから確認すると以下のように表示されます。

スライドが見切れてしまって悲しい感じになっています。

これはなんとかしたいですよね。

ということで、なんとかしたので紹介します。

なぜ余白ができたり見切れたりしまうのか

PCから見ると余白ができ、スマホから見ると見切れてしまうのはCopy iframe embed codeでクリップボードにコピーされるiframeに設定されたスタイルの影響です。

iframeのスタイルを確認すると、iframeの高さと横幅としてwidth: 560px; height: 314px;が指定されています。

そのため、埋め込んだスライドの大きさが固定されています。

PCとスマホで当然表示できる範囲が異なるので、横幅に応じてスライドの大きさを変更してほしいですよね。

aspect-ratio を使おう

パッと思いつく解決策はwidthを100%にすることかなと思います。

width: 100%;にすると以下のように表示されます。

余白は無くなりましたが、縦に見切れています。

それはそのはず、横幅は大きくなったにも関わらず、height: 314px;のままだからです。

これは困った。

そんな、上手い具合にアスペクト比を調整するためにはaspect-ratioを指定します。

aspect-ratioはボックスのアスペクト比を指定するCSSのプロパティです。

aspect-ratio: 16/9とすることで、スライドを埋め込んでいるiframeのボックスサイズが16:9になります。

今回は、Copy iframe embed codeでクリップボードにコピーされたiframeにはクラスspeakerdeck-iframeが指定されているので、以下のようなCSSを用意しました。

.speakerdeck-iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

CSSを読み込ませて、width: 560px; height: 314px;を削除してあげれば以下のように表示されます。

余白や途中で見切れるといったことがなくなりました。

見やすさって大事

ブログ記事内に埋め込んだSpeaker Deckのスライドをレスポンシブ対応させてみました。

見やすさって大事ですよね。気になる方は是非、参考にしてみてください。

ちなみに、今回使ったaspect-ratioはIE以外の主要ブラウザに対応しています。どんどん使っていきましょう。

この記事が誰かの助けになれば幸いです。

以上、AWS事業本部 コンサルティング部の のんピ(@non____97)でした!