Embed YouTube Video in Obsidian

Obsidian is a powerful knowledge base on top of a local folder of plain text Markdown files.

I have been using obsidian for several months as a personal knowledge base, research, and writing tool.

The key benefits that I have found to date are,

• Automatic internal linking (wikilinks)
• Powerful search
• Plugin support
• Storage using plain text files

Embedding YouTube Video

Obsidian supports embedded HTML in notes which allows for HTML code to be embedded and rendered in a note. This allows for features link embedding a YouTube video (amongst other content) directly into a note.

This is extremely useful as the referenced material is directly available and can be viewed without leaving the Obsidian application.

The process of obtaining the HTML code to embed from YouTube is extremely simple,

• Click on the ‘Share’ link
• Click on the ‘Embed’ image
• Press a ‘Copy’ link on the popup

The HTML code to embed will now be copied to the system clipboard. Simply paste this into a note,

This will be rendered as follows,

The clip can now be viewed in Obsidian or you can use a link to navigate to the YouTube site.

Responsive Embedding

The only problem with the default behavior is that the full-screen width is not utilised for the embedding clip on many devices.

We will use an Obsidian customisation feature which is CSS Snippets. This allows for customised CSS to be specified which changes the rendering of text in the notes (in this case the rendering of our embedded YouTube clips).

To clear a CSS Snippet,

• Click on the gear icon…