Iframe

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?)

Regards,

Tansy

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.

https://www.w3schools.com/tags/tag_iframe.asp

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?

2 Likes

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

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?
Thanks

Snippet:

.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.
P.S.:
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