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:
- 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.
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.
2 Likes
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.
2 Likes
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 
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
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?
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 
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
1 Like