Hey guys,

Can I get the basic code for iframe for embedding youtube and podcasts… I am new to iframe and everything.

Also, what can you embed in iframe?

The media I use is:

  • Twitter
  • Youtube
  • Podcasts (what do you need to embed?)



Try the link below to learn about the iframe tag. Pressing “Try It Yourself” and tinkering with the code might give you a better understanding. You can use an iframe to embed any website.


You can embed a Twitter post or a YouTube video with code provided on their respective sites.

Twitter: Press the three dots on the top right of a post and press “embed.” Next, copy and paste the code and into your note.

YouTube: Press “share” and then “embed” to get the iframe code. Then, paste the code in your note.

Podcast: Depends where you get your podcasts.

Bryan Jenks has a very in-depth video where he explains how he puts videos and podcasts in his notes. The time-stamps are helpful.

1 Like

I believe there is also a plugin to help with this called Convert URL to preview (iframe). GitHub - FHachez/obsidian-convert-url-to-iframe: Plugin for Obsidian.md to convert a selected URL to an iframe.

1 Like

Does anyone know why the app shows a version 0.2.0 available but it doesn’t update? (It is the same on github)
The change log for 0.2.0 says the issue with sliding panes got fixed in it.

Is there a code to get a full size 100% height and width for iframe for now?
I found this css snippet but doesn’t work :frowning:

iframe {
        display: block;
        background: #000;
        border: none;
        height: 100vh;
        width: 100vw;

Does using height: 100%; and width: 100% work?


How exactly I should use it? I am not very familiar with html and css

Just replace 100vh and 100vw with 100%.

1 Like

Just tried it, it doesn’t work

1 Like

I was afraid of that. Here’s a discord post that includes a snippet that lets you resize an iframe.

1 Like

I don’t have an account there, can you just copy the code here?


.resize-iframe.markdown-preview-view {
  padding: 0px;

.resize-iframe > .markdown-preview-sizer.markdown-preview-section
  height: 100%;
  padding: 0% !important;
  max-width: none !important;

.resize-iframe > .markdown-preview-sizer.markdown-preview-section > div:last-child
  height: 100%;

Then, put this at the very top of the file you want to affect:

cssclass: resize-iframe
1 Like

Thank you very much

Does it work?

No, I thought it would work.
I think maybe not using snippet and set the size directly in the tag itself may work. The code this iframe plugin uses resize the width to 100%. the only problem is setting height.
it is like this:


Try putting this under max-width:

max-height: none !important;
1 Like

Still no difference

Found the solution:

The problem was that the value for height should be in number of pixels not in percentage.

1 Like

I cant make it work, do you know if I have to do something after enabling it? It doesn’t display the website :man_shrugging:t4:

You need to go into Settings > Appearance, refresh snippets, and enable the one you added in the .obsidian/snippets directory.

But the css isn’t working for me - I am getting a larger border around the iframe

The link is dead, reminds me of Please stop making Discord servers for things that shouldn't be Discord servers | PC Gamer and Scala's Gitter to Discord migration mistake - Alexandru Nedelcu