# Adding iFrame to Obsidian Note

> How to add an iFrame to an Obsidian Note.

Source: https://curiouslychase.com/posts/adding-iframe-to-obsidian-note/

I need to add embeds to my [Obsidian](https://curiouslychase.com/tools/obsidian/) notes a specific way so that they render on my website ([chaseadams.io](https://curiouslychase.com/posts/chaseadamsio/)) _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:

```html
<div class="iframe-wrapper">
	<iframe 
	src="https://www.loom.com/embed/5ccaf045fe15410fb9369a70c3dc7210" 
	webkitAllowfullScreen mozAllowFullScreen allowFullSscreen>
	</iframe>
</div>
```

It would render like this in [Obsidian](https://curiouslychase.com/tools/obsidian/):

and like this in my website:

The CSS that makes this work:

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

.iframe-wrapper 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.