# How long should a video loop be for posts and screens?

[Canonical HTML page](https://gradiently.design/guide/video-loop-length)

A loop that's too short shows its seam every few seconds; one that's too long is a heavy file nobody watches to the end. Here are the right lengths for each place a loop lives, and how to choose between them.

## The short version

- For social posts and stories, a video loop of 5 to 15 seconds is usually long enough to read and short enough to replay.
- Website background loops work well at 10 to 30 seconds, kept small enough to load quickly.
- Screens in shops, venues and receptions suit longer loops of 20 to 30 seconds, because people see them many times.
- Animated GIFs for emails should stay around 2 to 5 seconds, because GIF files grow quickly with length.
- Slow motion makes any loop length feel calmer and hides the moment the loop restarts.

How long should a video loop be? For most social posts and stories, **5 to 15 seconds**. For a website background, **10 to 30 seconds**. For a screen in a shop or venue that people pass every day, **20 to 30 seconds**, and for a GIF in an email, just **2 to 5 seconds**. The right length is a balance between three things: time to read any words, how often people will see the restart, and file size. A seamless loop with slow motion can be shorter than you'd expect.

## Video loop length by placement

| Where it plays | Loop length | Why |
| --- | --- | --- |
| Feed post (Instagram, LinkedIn, Facebook) | 5 to 10 seconds | Seen briefly while scrolling; short loops replay before people move on |
| Story or Reel background | 5 to 15 seconds | Long enough to read the words, short enough to stay light |
| Spotify Canvas | 3 to 8 seconds | Spotify's own range for Canvas loops |
| Website hero background | 10 to 30 seconds | Visitors stay a while; a longer loop hides its restart |
| Screens in venues and shops | 20 to 30 seconds | Staff and regulars see it all day, so repetition must be gentle |
| GIF in an email | 2 to 5 seconds | GIF files grow fast; some email apps show only the first frame |

Starting lengths for each place a loop lives. Adjust for how much text the design carries.

## Three things that decide the length

### Time to read the words

If the loop carries a message, it must stay on screen long enough for someone to read it comfortably, ideally twice. A three word headline needs only a few seconds; a headline, a date and a place need more. If words animate in, count from the moment they settle, not from the start.

### How often the restart is seen

Every loop has a seam, the moment the last frame meets the first. Even a perfect [seamless loop](https://gradiently.design/guide/seamless-loop-video) repeats its pattern, and the more times someone watches, the more they notice it. That is why loops that are watched for a long time, such as screens in a café or a website hero, deserve more seconds than a post scrolled past in two.

### File size

Length is the biggest driver of file size. Double the seconds and, at the same quality, you roughly double the file. On a website that slows the page; in an email it can push a GIF past what inboxes will happily load. Short loops with slow movement give the best ratio of feeling to kilobytes.

### Too short

- Words gone before they're read
- The restart is visible every couple of seconds
- Motion has to be fast to fit, which feels nervous
- Feels like a GIF from a meme

### Too long

- Heavy file, slow to load
- Nobody sees the second half on a feed
- Nothing new happens, just more of the same

## Match the motion speed to the loop

Length and pace work together. A slow drift across 10 seconds feels calm and expensive; the same drift squeezed into 3 seconds becomes a wobble. As a rule, choose the pace first, then pick the shortest length in which one full cycle of that motion looks unhurried. Gentle motions, such as colour slowly breathing or light moving across a gradient, can loop at any length because they never draw attention to where they start.

A vertical story loop reading Open late on Fridays for Harbour Books, on a slowly drifting gradient

A story loop at 8 seconds: one line of words, a slow drift, gone before it repeats too often.

A widescreen café screen loop reading Today's soup: roast squash, served from 11:30, on a calm gradient

A counter screen loop at 30 seconds: the background breathes so slowly that customers queueing never see a restart.

## Website background video length

A background video on a website should be 10 to 30 seconds, silent, and as small as you can make it while still looking clean: aim for a few megabytes, not tens. Give it a poster image so something shows while it loads, and stop it for visitors who have asked their device for reduced motion. [Video background website](https://gradiently.design/guide/video-background-website) covers compression and formats in full.

```html
<video class="hero-loop" autoplay muted loop playsinline
       poster="/hero-poster.jpg" preload="metadata">
  <source src="/hero-loop.webm" type="video/webm">
  <source src="/hero-loop.mp4" type="video/mp4">
</video>

<script>
  // Pause the loop for visitors who prefer less motion
  if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
    document.querySelector('.hero-loop').pause();
  }
</script>
```

A muted, inline background loop with a poster frame and a reduced motion check. Browsers only autoplay video that is muted.

## Choosing a loop length, step by step

1. **Start from the placement** Take the starting range from the table above for where the loop will play.
2. **Time the words** Read the text aloud twice at a relaxed pace. The loop should be at least that long after the words settle.
3. **Set the pace** Choose slow motion for brand loops and screens; save brisk motion for short, energetic posts.
4. **Watch it five times** Play the loop on repeat. If the restart starts to bother you by the fifth play, add seconds or slow the motion.
5. **Check the file** If it's too heavy for the page or the email, shorten it before you lower the quality.

For specific formats, see [Spotify Canvas size](https://gradiently.design/guide/spotify-canvas-size), [animated email headers](https://gradiently.design/guide/animated-email-header) and [ambient video](https://gradiently.design/guide/ambient-video) for screens that play all day.

## Loop lengths in Gradiently

With Pro, Gradiently exports any design as a seamless loop from 5 to 30 seconds, as MP4 or WebM up to 1080p, or as a GIF. You choose the seconds and a slow, even or brisk pace, and the Mark's motion is built to join without a visible seam at whatever length you pick. Recording runs in real time, so a 30 second loop takes 30 seconds to make; keep the tab open while it finishes.

## FAQ

### How long should a looping video be for Instagram?

5 to 10 seconds for a feed post and 5 to 15 seconds for a story or Reel background, long enough to read any words twice.

### How long should a website background video be?

10 to 30 seconds, silent and compressed to a few megabytes, with a poster image and a pause for visitors who prefer reduced motion.

### How long should a GIF loop be?

Around 2 to 5 seconds. GIF files grow quickly with length, which matters most in emails.

### Does a longer loop look better?

Only where people watch for a long time, such as screens and website heroes. On a feed, extra seconds add file size that nobody sees.

### How do I hide where a video loop restarts?

Make the last frame flow into the first, use slow motion and give screens that play all day a longer loop of 20 to 30 seconds.