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: https://github.com/julesvirallinen/obsidian-digital-garden/pull/10 template: https://github.com/julesvirallinen/digitalgarden-dev/pull/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

[GJRobert]

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

Merci, vous êtes un génial! Thank you you're a genius!

[jsifalda]

@GJRobert / @mpresecan let me know if you are looking for any other tips regarding digital garden or obsidian generally ;)

[jsifalda]

@GJRobert / @mpresecan what are your digital gardens? :) what about exchanging backlinks? 😇

[GJRobert]

@GJRobert / @mpresecan what are your digital gardens? :) what about exchanging backlinks? 😇

Hi @jsifalda I have two DGs currently, both generated from the same Obs vault :) I have written an crude instruction on my IT DG: Multiple DGs with 1 vault

So that is my IT DG. And here's my DG on languages and future of Taiwan: 🏡 Aiuanyu Both of them are written mostly in the Chinese language, so you may have to use Web translation tool to skim them 😃

[jsifalda]

cool, where can i reach out to you? :)

[GJRobert]

cool, where can i reach out to you? :)

Hi, I have seen that you have followed my Twitter account https://twitter.com/Aiuanyu You can also find "Aiuanyu" on Facebook, IG, and Threads. Feel free to talk! Just that there are very few tweets / thread yet. But I'm willing to exchange information.