Free · runs in your browser
Turn a few seconds of footage into a light, silent loop that repeats behind your page without a visible restart, then drop it into a video tag.
A background video loop is a short, silent clip that plays behind part of a web page and repeats without a visible jump. Here the join is set to Crossfade, the sound to Off and the format to WebM, so you export one smooth pass, then let the browser’s loop attribute repeat it for as long as the page is open.
Exporting a single pass keeps the file as small as it can be. With a crossfade, the last frames of that pass dissolve towards the first ones, so when the browser jumps back to the start it lands on almost the same picture and the restart is hard to spot.
The editor runs in your browser, so unreleased client footage never leaves your machine. It is free and adds no watermark.
Click Select video or drop the file on Drop a video to loop. Chrome and Edge open the widest range of formats.
Pick three to eight seconds with steady movement. Find the best loop (F) searches the clip for the start and end that match most closely; set Shortest loop to 2 or 4 s so it doesn’t settle on a tiny fragment.
The page starts on Crossfade at half a second. Slow footage often looks better with a longer Crossfade length. Press Watch the join (J) to replay the restart until you can’t see it.
Keep Sound on Off. In Export settings, try Size 720p and Quality set to Smaller file, and read the estimate line underneath for the file size before you export.
With Format on WebM, click Export video and Download video. Then click Change loop (E), switch Format to MP4 and export again, so you have both files for the source list.
A minimal version looks like this: <video autoplay muted loop playsinline poster="hero.jpg"> <source src="hero.webm" type="video/webm"> <source src="hero.mp4" type="video/mp4"> </video>. Each attribute has a job.
In CSS, give the video object-fit: cover so it fills its container at any width. Cover crops the edges as the box changes shape, so keep the interesting part of the frame near the centre, or crop it first with Shape under More options.
A background video downloads on every visit that shows it, often before anything else on the page, and on a phone connection that cost is real. A useful rule of thumb is to keep a hero loop within a few megabytes, and smaller if it sits on a page people reach on mobile data.
Compare the estimates for WebM and MP4 and list the smaller one first in your sources, as long as you are happy with how it looks.
Constant movement behind text can be distracting, and for some people with vestibular disorders it causes real discomfort. Operating systems let people ask for less motion, and pages can read that preference through the prefers-reduced-motion media query. The video element doesn’t check it by itself, so add a few lines of script that pause the video, or skip autoplay, when the query matches. The poster then stands in as a still background.
The Web Content Accessibility Guidelines also ask for a way to pause, stop or hide moving content that starts on its own, lasts more than five seconds and sits alongside other content. A small, visible pause button that calls the video’s pause method meets that, and a looping background lasts well beyond five seconds.
The best background loops have motion spread evenly across the frame and nothing that draws the eye away from the headline. Clouds, water, foliage, slow pans across a city or a product turning on a stand all suit it. People walking in and out of frame, cuts between shots and changes in light are hard to loop and easy to notice.
If Find the best loop reports a Poor match, the footage never quite returns to where it began; it suggests Use a crossfade, which hides most of that. For a jump of a frame or two, Blend softens it without shortening the loop. Footage with only one moving element, such as steam over a cup, can also become a cinemagraph, which freezes everything else and is often smaller still. For more on loop points and joins, see seamless loop video.
The most common cause is a missing muted attribute, because browsers block autoplay for video with sound. Phones also need playsinline. Some browsers hold back autoplay in data-saving or power-saving situations, which is another reason to set a poster.
MP4 with H.264 plays in practically every current browser, so it is the safe single choice. Adding WebM as a first source lets browsers that handle it use it when it is the smaller file. If WebM isn’t offered as a format in your browser, export MP4 alone.
Usually three to ten seconds. Long enough that the repetition isn’t obvious, short enough to keep the download light. A good join matters more than length.
The loop attribute repeats the file in the browser for free. Exporting several passes would multiply the file size without changing what visitors see.
For a background, no. A GIF is usually many times larger than an equivalent video and limited to 256 colours. Keep GIFs for places that can’t play video; for those, see make a looping GIF.
The jump you notice almost always comes from the footage itself: the last frame differs from the first. A Crossfade or Blend on export removes most of it, and Watch the join shows you the restart before you export.
No. The video is processed in your browser and the files are saved straight to your device.