EN

← All examples

CSS Media bsky.app

Bluesky: disable GIF autoplay

Freezes embedded GIFs in the feed and only plays them on hover, with a small "GIF" badge in the corner.

Code to copy

/* Freeze animated GIF embeds until the user hovers over them */
[data-testid="gifEmbed"] video,
[data-testid="gifEmbed"] img {
  animation-play-state: paused !important;
}
[data-testid="gifEmbed"]::after {
  content: "GIF";
  position: absolute;
  bottom: 6px; left: 6px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
}
[data-testid="gifEmbed"] { position: relative; }
[data-testid="gifEmbed"]:hover video,
[data-testid="gifEmbed"]:hover img {
  animation-play-state: running !important;
}

How to use this example

  1. Copy the code with the button above.
  2. Install JustZix (2 minutes) and open the extension on the target page.
  3. Add a new rule matching that page.
  4. Paste the code into the rule's CSS panel and save — the effect appears instantly.

Rate this example

No ratings yet — be the first.

Does this example work?

blueskygifautoplaymedia

Related examples

Snippets are useless without somewhere to paste them.

JustZix takes 2 minutes to install and runs your code on every matching page. No account, no payment.

Download free See use cases