Video embeds

[MMMaellon]

I would love to be able to embed videos in my notes and have them appear on my digital garden as well. Right now, it just shows ![[videofilename.mp4]] in it's place instead.

[oleeskild]

Thanks for the suggestion! This could perhaps be something to look into in the future. Currently the way pictures are uploaded is the whole image is embedded right in the note. (If you look at a note with an image in your repo you will see that there is a really long text string in the note. This is the entire picture encoded as text). Doing the same for video isn't really feasible. If I, at a later point, implement some sort of CDN support to upload large files, this could perhaps be something to look into.

What you could do right now to make this possible is to use the embed feature of youtube videos. This would create a youtube player in your note. (This should work both in obsidian and in your garden). It would look something like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/djV11Xbc914" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

The downside of course is that you would have to upload the video to youtube first.

[stalegjelsten]

I would love for Digital garden to support the YouTube embed syntax used in Obsidian: ![alt text](https://youtube.com/watch?v=VIDEO_ID).

At the moment, this syntax is always interpreted as an image by Digital garden, with resulting `.

[julesvirallinen]

MVP using markdown-it-video:

plugin: julesvirallinen#10
template: julesvirallinen/digitalgarden-dev#1

EDIT: Read the original issue and this would only enable @stalegjelsten suggestion

[jsifalda]

any updates?

[stalegjelsten]

@jsifalda for youtube embeds I'm using a custom filter in the Obsidian Digital Garden settings. It replaces all occurences of ![](https://youtube.com/watch?v=VIDEO_ID) with an iframe video embed.

Search for
!\[(.*)\]\(https?:\/\/w*\.?(?:(?:youtu\.be\/)|(?:youtube\.com\/watch\?v=))(.*)\)

Replace with
<iframe src="https://www.youtube.com/embed/$2" title="$1" style="width:100%; aspect-ratio:16/9" loading="lazy" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Updated 2024-01-27: I personally use a custom class for styling the iframe. I have now changed the code above to use a style attribute instead.

[jsifalda]

@stalegjelsten thanks, it is the very clever solution!
do you have also a similar regex for twitter/x please? 🙏

[jsifalda]

🚨 i found the way for twitter/x.com as well, guide is here https://www.craftengineer.com/embedding-x-twitter-links-in-your-obsidian-digital-garden/ 😇

[stalegjelsten]

Great post @jsifalda, but your filter is working too well because it's impossible to see the original Twitter syntax since it's been replaced by HTML. 😅

[jsifalda]

that is unfortunate, the same for the yt as well tho 😂

[jsifalda]

anyway it is fixed now ;)
thanks for heads-up @stalegjelsten

[kerim]

I am not very good with regex, but with the help of ChatGPT I've updated the filter so it can handle all three kinds of YouTube links: youtu.be/, youtube.com/watch?v=, or youtube.com/embed/:

search

!\[(.*?)\]\(https?:\/\/w*\.?(?:youtu\.be\/|youtube\.com\/watch\?v=|youtube\.com\/embed\/)(.*?)\)

replace

<iframe src="https://www.youtube.com/embed/$2" title="$1" style="width:100%; aspect-ratio:16/9" loading="lazy" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

[GJRobert]

This feature would be great~~~

[mpresecan]

Yes, this is very anticipated feature. ![video](https://www.youtube.com/watch?v=dQw4w9WgXcQ) would do much better, than pasting iframe

[jsifalda]

@GJRobert / @mpresecan this feature exists via custom filters, check this out https://www.craftengineer.com/embedding-x-twitter-links-in-your-obsidian-digital-garden/

[mpresecan]

@GJRobert / @mpresecan this feature exists via custom filters, check this out https://www.craftengineer.com/embedding-x-twitter-links-in-your-obsidian-digital-garden/

Thank you, this is awesome