概要
このように，ブログにスライドをいい感じに埋め込めるようになりました。
方法
埋め込み用の HTML は，以下の API から取得できます。
1https://speakerdeck.com/oembed.json\?url={slide_url}
{slide_url} には，Speakerdeck のスライドページの URL を指定してください。
これをブラウザに入力するなり curl で GET すると，json が帰ってきます。その json に こんな感じ 🔍
で，html というキーがあるのがわかると思います。これが埋め込み用の HTML です。
構造は以下のような感じになってます。
1<div style="{div_styles}">2 <iframe src="//speakerdeck.com/player/{slide_id}"3 style="{iframe_styles}">4 </iframe>5</div>
注：{slide_id} は {slide_url} とは異なるものです。
参考までにこのブログでは，style を以下のようにしてます。
1<div style="2 position: relative;3 display:block;4 margin:0 auto;5 width: 100%;6 max-width:780px;7 max-height: 585px;8 padding-bottom: 75%;9 top: 50%;"10>11 <iframe12 src="//speakerdeck.com/player/0bf3f3abf9044ff9be9f752d8028ff0d?slide=18"13 style="14 position: absolute;15 top: 0;16 left: 0%;17 width: 100%;18 height: 100%;19 max-width:780px;20 max-height: 585px;21 border: 0;22 "23 >24 </iframe>25</div>
React コンポーネントにして，MDX に埋め込む
ここから先は，このブログ特有の話です。
このブログでは，マークアップに MDX というのを使っています。MDX というのは JSX embedded in Markdown， はしょっていうと，React コンポーネントをマークダウンに埋め込んで使えるフォーマット形式です。
さっきの HTML のあれをコンポーネント化すると，以下のような感じで Markdown に埋め込めるようになります。
例）
1<Slide src="https://speakerdeck.com/player/{slide_id}"/>
定義したコンポーネントは以下です。
1import React from 'react';2import styled from '@emotion/styled';34const IFrame = styled.iframe`5 position: absolute;6 top: 0;7 left: 0%;8 width: 100%;9 height: 100%;10 max-width:780px;11 max-height: 585px;12 border: 0;13`1415const IFrameWrapper = styled.div`16 position: relative;17 display:block;18 margin:0 auto;19 width: 100%;20 max-width:780px;21 max-height: 585px;22 padding-bottom: 75%;23 top: 50%;24 // transform:translateY(-50%)25`2627const Slide = ( props ) => {28 return (29 <IFrameWrapper>30 <IFrame src={ props.src } allow={"fullscreen"}>31 </IFrame>32 </IFrameWrapper>33 );34};3536export default Slide;
おわり！
