[FEATURE]: Click-to-play on videos

[Rikiub]

Introduction

• One feature I loved about the Simple Embeds plugin is that instead of directly embedding the YouTube video iframe, it places the video thumbnail as a placeholder. When you click on the thumbnail it will load the "real" iframe.
• It's good because loading iframes can be performance intensive and performs poorly when there are many of them.
• You can see an example at Iframely Docs.

Implementation example

An implementation can be done using the oEmbed API standard of many sites. Some of them are:

• YouTube (Direct example because Google didn't document it).
• TikTok
• Soundcloud
• Spotify

Code example

I don't know anything about Obsidian on the "JavaScript" side so I'm trying to write a general example.

• I use the response of: https://www.youtube.com/oembed?url=https://youtu.be/xcJtL7QggTI
• I extract thumbnail_url and html keys from JSON and get this result (In CodePen looks broken but run it locally looks great).
• https://codepen.io/Rikiub/pen/jOjYwVE

Thoughts

• It would be nice to have click-to-play support for YouTube videos to avoid loading unnecessary content.
• It could also be used for other links, such as TikTok.

[GnoxNahte]

Sure I can try to do that! Thanks for the suggestion, research and code example!

The iframes that the plugin uses already has loading = "lazy"` though. So it'll only load when the embed is in view. I think I'll add the thumbnail as an option. Might be better to see a thumbnail and hopefully it'll load faster.

Lol I tried to do YouTube but I forgot the plugin doesn't embed YouTube and Twitter as Obsidian already does it. Not sure why I didn't try to embed it last time. Maybe I had some problem with it. Anyway, I'll try it again.

How I'll implement it:

• I'm planning to make a list of checkboxes with the various websites in the settings. Then, the user can select which website they want to embed. That way, they can choose to use Obsidian's implementation or use my embed. Or maybe it might conflict with some other embed and they can disable my plugin for that website only.
• Like said earlier, I'll add an option to toggle this feature. Maybe some people just want to click and play the video. I might add some placeholder before it fully loads though.

I'll be quite busy starting tomorrow to the end of next week though. I probably won't update it for a while... I'll update as soon as I can!

[GnoxNahte]

I remember why I gave up on replacing Obsidian's native YouTube and Twitter embeds.

The code for generating the YouTube and Twitter embeds is done. In fact, it was done on the first public version.

However, I have no way to prevent Obsidian from loading their own YouTube and Twitter embeds. I figured how to remove it in Reading mode but have no idea how to remove it in live preview. Obsidian uses CodeMirror for Live Preview, which is too confusing for me. I think its a miracle I was able to support embeds in Live Preview in the first place.

Using CSS to hide it works but it'll still load the embed, defeating the point of the thumbnail idea and the point of even replacing it in the first place.

In conclusion, I think I'll leave Obsidian's embeds on their own for now. Until there is a way to disable Obsidian loading their own embeds, I won't do it. I think Obsidian's embeds are better anyway haha. It's more native which works better. Though they don't support YouTube Shorts if it matters.

However, I'll still try to make placeholders and have a "click to load" option for the other embeds. Not sure if I'll do thumbnails for them but I'll see what I can do.

PS: While searching for ways to get YouTube thumbnails, I found that I can use this. For future use if you want too: https://i.ytimg.com/vi_webp/${this.videoId}/sddefault.webp

[GnoxNahte]

Fix with commit 87225856d681140b689c703c60e925ae9ef5b071. I forgot to link it to this issue when committing.

Currently, it adds a placeholder to all embeds by default. You can go to settings to enable it to be click-to-load. This change should solve Cumulative Layout Shift too.

Also, I won't add thumbnails for now. I'm not sure how to format it, especially when handling the different websites and embed sizes. I might add in the future when I have a better idea.

Sorry, I can't do YouTube. Tried asking the Obsidian Discord but got no response too. Maybe in the future when Obsidian exposes some API or maybe after learning more about CodeMirror.

I changed quite a lot of code to add the placeholder. Please report any bugs found and maybe any improvements to the placeholder styling. Released a new version! Thanks for the long wait!

[GnoxNahte]

Sorry for so many references, making it a bit messy😅. Spotted a few mistakes after releasing so deleted the previous release and uploaded a new one