Notion app logo
Struggling to stay organized and effective? Learn to master your time and tasks with the Effectively Notion course!

Adding iFrame to Obsidian Note

How to add an iFrame to an 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.

Photo of Chase Adams

Hey, I'm Chase. I help aspiring entrepreneurs and makers turn their ideas into digital products and apps.


Vector Arrow Scribbles
banner image for figma vector arrows scribbles

A figma community project of vectorized hand-drawn arrows.

Go To Figma
Vector Line Scribbles
banner for figma vector line scribbles

A figma community project of vectorized hand-drawn lines.

Go To Figma
Vector Shape Scribbles
banner image of figma vector shapes scribbles

A figma community project of vectorized hand-drawn shapes.

Go To Figma

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.


I'm on almost all social media as @curiouslychase.

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