Embed Video, Media or Web Contents

by typora.io

You could use <HTML> code to embed video/audio or remote web contents in Typora.

Table of Contents

Video

You could embed a video like this:

<video src="xxx.mp4" />

Or drag & drop a video file into Typora, and Typora will insert the video automatically.

The path of Video follows the same rule of images. So, the option “Use relative path as possible”, and “image root path” also applies to <video> content.

Audio

Same with <video>, you could use <audio> tag to embed an audio:

<audio src="xxx.mp3" />

Embed Web Contents

Some websites allow you to embed their contents into other webpages, most of them supports <iframe>, which is also supported by Typora. Could you just follow their “sharing” page/dialog, and paste their code into Typora, e.g:

<iframe height='265' scrolling='no' title='Fancy Animated SVG Menu' src='//codepen.io/jeangontijo/embed/OxVywj/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/jeangontijo/pen/OxVywj/'>Fancy Animated SVG Menu</a> by Jean Gontijo (<a href='https://codepen.io/jeangontijo'>@jeangontijo</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

which will become

Some websites only provide Javascript-based embed code, instead of an <iframe> snips, for example:

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Sunsets don&#39;t get much better than this one over <a href="https://twitter.com/GrandTetonNPS?ref_src=twsrc%5Etfw">@GrandTetonNPS</a>. <a href="https://twitter.com/hashtag/nature?src=hash&amp;ref_src=twsrc%5Etfw">#nature</a> <a href="https://twitter.com/hashtag/sunset?src=hash&amp;ref_src=twsrc%5Etfw">#sunset</a> <a href="http://t.co/YuKy2rcjyU">pic.twitter.com/YuKy2rcjyU</a></p>&mdash; US Department of the Interior (@Interior) <a href="https://twitter.com/Interior/status/463440424141459456?ref_src=twsrc%5Etfw">May 5, 2014</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Typora only supports some script-based sharing code, and those contents/scripts will also be running in a sandbox iframe with no access to your local file and writing contents.

We could consider allow users to config the “whitelist” for this kind in future updates.

PDF

Currently only macOS version supports embed PDF documents:

<iframe src="https://pdfobject.com/pdf/sample-3pp.pdf" style="height=800px;" />