Embed web pages in Obsidian Notes

Rob Coles

TL;DR: Obsidian’s HTML support lets us embed web pages in notes. I have used this to create a note that will display a random Wikipedia page every time the note is opened.

Introduction

Obsidian will happily render HTML, which is useful as it gives us even more options for layout than are provided out of the box.

I have used this, for example, to allow highlighting in colours other than the default that Obsidian comes with, so, with a bit of CSS, I can highlight text in different colours:

Highlight example

I had just read an article that mentioned the WikiRoulette site which will display a random Wikipedia page every time you hit it.

I automatically send myself a couple of emails of stuff to read each day (currently Daily Stoic, cartoons, and Daily Laws), and I wondered if it was going to be possible to also send a random Wikipedia page.

I had a look at the WikiRoulette page to try and see how it worked, but the clever stuff was being done dynamically, so it wasn’t going to be easy to just grab what they had done.

I did some googling and ChatGPT-ing and discovered that Wikipedia actually has an endpoint that you can hit that will show a random page:

https://en.wikipedia.org/wiki/Special:Random

I assume this is what WikiRoulette is doing, but it allowed me to cut out the middleman.

Ages ago I had seen a Bryan Jenks video on using iframes with Obsidian. He explains it much better than I can, but an iframe is a way of using HTML to embed one web page into another. We can use the same process to embed a web page into an Obsidian note as it is a standard HTML element.

Examples he uses include embedding a YouTube video or embedding Calibre for reading a book. I wondered if it could be done for the random page, and it turns out it can, and it is pretty simple.

This is the whole of the page including the title: Iframe source

Within the iframe tag, we specify the width and height so that the article is somewhat readable. This size works for me on a multi-monitor setup on a desktop PC. We also specify the Wikipedia random page URL.

That is all that is needed. Each time the page renders, a new random page will be retrieved and displayed.

I have added a link to the “Random Wikipedia page” note in my daily note, and I’m trying to use it rather than social media when I hit a break.

Why would you do this rather than just visiting the web page?

For me, it’s a combination of convenience and minimising distractions.

You could argue that it’s a distraction in and of itself, but less so than opening it in a browser with all of the other shiny goodies just a click away. This constrains the distraction a bit, and since I have Obsidian open most of the time, accessing it is easy.

The ability of Obsidian to render raw HTML gives a lot of flexibility.

Note: Only embed content from trusted websites.

Some sites explicitly block being embedded in iframes using headers like X-Frame-Options or Content-Security-Policy (frame-ancestors). If a page refuses to load, this is likely the reason.

Resources: