CODEWITHSUNDEEP
markdowngifanimated-gif
Finchfinch
Finchfinch

Reputation: 1

How to disable auto play for gifs in MD files?

I am currently composing a series of mark down files using Visual studio code. I would like to embed gifs to demonstrate key steps. It works great, but the gif auto plays (locally and when uploaded to Azure DevOps). This is not my desired behaviour, I want to disable auto play, is there any way to do this.

Below is the code I'm using to embed the gif:

![](../pathtogif/randomgif.gif)

Am I going about this the wrong way? Should I just convert them to video first?

I've done some googling and cannot find an easy way to do this unfortunately

Upvotes: 0

Views: 249

Answers (1)

Jurijs Kovzels
Jurijs Kovzels

Reputation: 6270

There is no way to stop gif programmatically. You can of course convert gif to video.

Alternatively you can have static *.png or *.jpg for each gif and swap them on mouse enter/leave with a bit of javascript. Something along this lines:

<script>
 
 function onHoverLeave(event) {
    let img = event.currentTarget;
    let src = img.src.slice(0, -3);
    
    if(event.type == "mouseenter"){
        src += "gif";
    }else{
        src += "jpg";
    }
    img.src = src;
 }
 let images = document.querySelectorAll("img");
 
 images.forEach((img) => {
  if(img.src.endsWith(".gif")) {
    img.src = img.src.slice(0, -3) + 'jpg';
    
    img.addEventListener("mouseenter", onHoverLeave);
    img.addEventListener("mouseleave", onHoverLeave);
    
  }
});
</script>

Pretty sure that you can find a way to convert your gifs to static images and add the script automatically.

Upvotes: 0

Related Questions