A Play Button for GIFs to save resources

Feature requests
1

I added several GIFs to a note, but unfortunately, this has caused the note to lag. It appears that the note is unable to handle the GIFs effectively. It would be preferable if the GIFs were only activated when I scroll to them or click on them.

4 Likes
2

I agree, in my case I’ve many tutorial notes and these use short, but nevertheless resource intensive gifs, eating uselessly resources.

A solution would be to play gifs just once automatically and afterwards only by mouse hover.

Css snippets could do the job and pause/play gifs, but implementing such a feature in a snippet would not be trivial.

3

It’s not a stop & start button, but you could tuck videos/gifs in a folded callout if you have a bunch in a note:

> [!warning]- title...
> ![[my.gif]]
1 Like
4

I just wrote my own snippet, will add it to my theme as well :blush:

This snippet works but i need to do further tests. Could you try it too and let me know me if performance improves on your system ?

/* pause gif */
.image-embed[src*=".gif"] img {
  width: 0;
  visibility: hidden;
}

.image-embed[src*=".gif"]::after {
  content: "GIF";
  font-size: 1.6em;
  color: gray;
  border: 3px dashed gray;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  width: 50px;
  height: 50px;
  border-radius: 6px;
}

.image-embed[src*=".gif"].is-loaded:hover img {
  width: 100%;
  visibility: visible;
}

.image-embed[src*=".gif"]:hover::after {
  display: none;
}
1 Like
5

Hi all,

I’m extremely interested by this play GIF on hover feature.

Any news ? How’s it working for you guys ?

I would pay serious money if Obsidian or someone is able to get this feature up and running

6

+1 for the feature to stop playback of .gif images

8

You can try my snippet above.

Just copy, paste and save as simple txt file. Then, change manually the file extension to css.

In case you hear the first time of snippets check out:

Also, if you want a better implementation or if the code above doesn’t work anymore, consider to try out my theme and if you like it, send me a pizza :pizza: :smile:

9

Related thread:

10

Hi Joop,

for me this does not work. My GIFs don’t pause. They play in an infinite loop with and without snippet.

Thanks for putting in the work though!

11

@max-nothacker
well, it’s old code (my post is from August '23) - code changes all times, sometimes more sometimes less.
If you’re interested in my theme, with feature updates, then check out Dune.