スライドを埋め込むデモ

github pages by hugoにスライドを埋め込む方法を調べたのでメモがてら。

Office 365とGoogle slidesを使った例を紹介。どちらもウェブ上でスライドをいじった後にブログの方をリロードすれば自動で更新がかかるので優秀。

Office 365の機能を使った例

ログインしないと見れないのが難点かも…？ ログインせずに見れる方法があれば教えてください。

Google slidesを使った例

こっちのが良いかも。

レスポンシブにするには

出てきたiframeタグに対してその上位にdivタグを設定。そこに対してclassやidでcssを直接あてに行く。

具体的には以下のような感じでできる。

<div class="iframe-outer">
<iframe class="iframe-tags" src="...", ...</iframe>
</div>

.iframe-outer{
  position: relative;
  padding-top: 75%; /* 4:3の縦横比率にしたい場合、3÷4=75% */
}

.iframe-tags{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}