こいつらいつ使うん埋め込み集

2024 / 5 / 21

ブログ内に埋め込むことができるコンテンツたちの代表例をまとめました

いつ使うのか分かりませんが、こんなもの埋め込めますよというのをリストアップします。
基本的にはHTMLに埋め込めるものは使えるようです。

Web サイト見出し「Web サイト」

<iframe src="https://www.takahashi.qse.tohoku.ac.jp" class="w-full"></iframe>

Google Map見出し「Google Map」

<iframe
class="aspect-[16/9]"
frameborder="0"
title="map"
marginheight="0"
marginwidth="0"
scrolling="no"
src="https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d2220.7717857620264!2d140.836551948494!3d38.25521785690698!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e3!4m5!1s0x5f8a28567b9e0203%3A0x966a44e822756a66!2z6Z2S6JGJ5bGx!3m2!1d38.255548!2d140.83552559999998!4m5!1s0x5f8a28570c44e331%3A0x856877930a591764!2z57eP5ZCI56CU56m25qOf!3m2!1d38.2545539!2d140.8394304!5e0!3m2!1sja!2sjp!4v1701865600982!5m2!1sja!2sjp"
width="100%"
allowfullscreen=""
oading="lazy"
referrerpolicy="no-referrer-when-downgrade"
>
</iframe>

CodePen見出し「CodePen」

<p
class="codepen"
data-height="300"
data-default-tab="html,result"
data-slug-hash="mdYPywN"
data-pen-title="Untitled"
data-user="Futty93"
style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
>
<span
>See the Pen
<a href="https://codepen.io/Futty93/pen/mdYPywN"> Untitled</a> by Futty93
(<a href="https://codepen.io/Futty93">@Futty93</a>) on
<a href="https://codepen.io">CodePen</a>.</span
>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

See the Pen Untitled by Futty93 (@Futty93) on CodePen.

Asciinema見出し「Asciinema」

<script
id="asciicast-7592"
src="https://asciinema.org/a/7592.js"
async
></script>

Figma見出し「Figma」

<iframe
class="aspect-[16/9]"
style="border: 1px solid rgba(0, 0, 0, 0.1);"
height="auto"
width="100%"
src="https://www.figma.com/embed?embed_host=astra&url=https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File"
allowfullscreen
>
</iframe>

Speaker Deck見出し「Speaker Deck」

<iframe
class="speakerdeck-iframe"
frameborder="0"
src="https://speakerdeck.com/player/cd6be68a4e2145068d58808c51318a1a"
title="使いにくいヒューマンインターフェースの館"
allowfullscreen="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: 100%; height: auto; aspect-ratio: 16 / 9;"
data-ratio="1.7777777777777777"
>
</iframe>

SlideShare見出し「SlideShare」

<iframe
class="aspect-[16/9]"
src="//www.slideshare.net/slideshow/embed_code/key/B6SfqHFrWhihpr"
width="100%"
height="auto"
frameborder="0"
marginwidth="0"
marginheight="0"
scrolling="no"
style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;"
loading="lazy"
allowfullscreen
>
</iframe>

Google Slide見出し「Google Slide」

<iframe
class="aspect-[16/9]"
src="https://docs.google.com/presentation/d/e/2PACX-1vT6_5Wrpyx9_rwW2CR4EvwzSrpK1K-8wM9bPScv8KIbbIDVTUAEk7T2ZQQWtqDlhJyyHapESHmbFVTu/embed?start=false&loop=false&delayms=3000"
frameborder="0"
width="100%"
height="auto"
allowfullscreen="true"
mozallowfullscreen="true"
webkitallowfullscreen="true"
>
</iframe>

Docswell見出し「Docswell」

<script
async
class="docswell-embed"
src="https://www.docswell.com/assets/libs/docswell-embed/docswell-embed.min.js"
data-src="https://www.docswell.com/slide/LK7J5V/embed"
data-aspect="0.5625"
></script>
<div class="docswell-link">
<a href="https://www.docswell.com/s/ku-suke/LK7J5V-hello-docswell"
>Docswell(ドクセル)はじめました by @ku-suke</a
>
</div>

Youtube見出し「Youtube」

<iframe
class="aspect-[16/9] h-full w-full"
src="https://www.youtube.com/embed/nue-bLFGKK8?si=f07CP0PP8KIReCMn"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
>
</iframe>