Adding iFrame to Obsidian Note

How to add an iFrame to an Obsidian Note.

thumbnail for Adding iFrame to Obsidian Note

I need to add embeds to my Obsidian notes a specific way so that they render on my website ( and so that they render properly in my notes.

When adding an embed, the iFrame needs to be added with a div with class="iframe-wrapper".

As an example, a Loom would look like this:

<div class="iframe-wrapper">
	webkitAllowfullScreen mozAllowFullScreen allowFullSscreen>

It would render like this in Obsidian:

and like this in my website:

The CSS that makes this work:

.iframe-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  margin: 2rem 0;
  height: 0;

iframe {
  border: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;

This allows the .iframe-wrapper to control the display of the iframe.

Was this page helpful?

Subscribe to my Newsletter

Every other week I publish the Curiously Crafted newsletter.

In it, I explore the intersection of curiosity and craft: the people who make stuff, what they make and the way they pursue the craft of making.

The curious logo of Chase Adams: glasses and a bow tie.stay curious.