---
title: "Video GIF"
description: "Embed MP4s as lightweight, looping GIF-style videos with lazy loading, custom sizes, and zero layout shifts."
url: "https://freshjuice.dev/docs/modules/video-gif/"
---
Documentation

# Video GIF

[View module on HubSpot Marketplace](https://app.hubspot.com/l/ecosystem/marketplace/modules/video-gif-module-by-freshjuice?utm_source=freshjuice.dev)

The **Video GIF** module replaces heavy, pixelated GIF files with modern, lazy-loaded MP4 loops. Showcase your products in high-quality, SEO-friendly animations without sacrificing performance.

[View module preview](https://demo.freshjuice.dev/modules/video-gif) — see examples with different sizes, rounded corners, and poster images.

---

## Content tab (video setup)

### Video Source

-   External: Paste a direct MP4 link (CDN, HubSpot Files, etc.)
-   HubSpot: Select a HubSpot-hosted video asset.

#### URL / File

Paste your MP4 file link (External) or pick a HubSpot Video. For best results, keep files short, muted, and under 2 MB.  
See [Video format requirements](#video-format-requirements) for compatibility details.

![sidebar Video Source dropdown and URL/File input](https://freshjuice.dev/_astro/video-source.CNsQcs0C_17XO6q.webp)

Sidebar Video Source dropdown and URL/File input.

### Width & Height

Define the intrinsic video dimensions (in pixels). The module auto-calculates aspect ratio for consistent rendering.

![sidebar Width and Height fields](https://freshjuice.dev/_astro/width-and-height.p9DBwVJ9_2aiBG2.webp)

Sidebar Width and Height fields.

### Poster Image (optional)

Upload a fallback image that displays while the MP4 loads or for very old browsers without video support.

![sidebar Poster upload](https://freshjuice.dev/_astro/poster-image.WnvavV5t_Z21z8KS.webp)

Sidebar Poster Image upload.

## Advanced options

Expand the **Advanced** group in the sidebar:

-   **Custom CSS Class** — add extra classes for targeting or styling.

![sidebar Advanced group expanded](https://freshjuice.dev/_astro/advanced-settings.Cq761fK2_Z1bzxHJ.webp)

Sidebar Advanced settings.

## Style tab

-   Max Width — set the maximum width of the video block (e.g., 420, 960, 1280).
-   Alignment — align video left, center (default), or right.
-   Border Radius — apply rounded corners in pixels.

![Style tab settings for max width, alignment, border radius](https://freshjuice.dev/_astro/style-settings.CDnMoi_R_qktbB.webp)

Style → width, alignment, and border radius.

---

## Video format requirements

For **maximum browser compatibility**, all uploaded videos should be in **MP4 (H.264 codec)**. Other formats (like WebM or HEVC) may not play in certain browsers or older devices.

Need to compress or convert?  
Use [JuicePress](https://juicepress.app/?utm_source=freshjuice.dev), our free desktop app built for web video compression. Select the **Video-GIF** preset for silent, looping clips optimized for this module. You can also use any online MP4-to-H.264 converter if you prefer.

> Best practice: keep files short (a few seconds), muted, and under **2 MB** for optimal loading performance.

---

Looking to install this module?  
[Get Lite Video Embed on the HubSpot Marketplace](https://app.hubspot.com/l/ecosystem/marketplace/modules/video-gif-module-by-freshjuice?utm_source=freshjuice.dev)