---
title: What are the best practices for hosting videos on Vercel?
description: Learn the ideal solutions for using video files like .mp4 and .gif on Vercel to prevent excess bandwidth consumption.
url: "https://vercel.com/kb/guide/best-practices-for-hosting-videos-on-vercel-nextjs-mp4-gif"
published: 2025-11-03
last_updated: 2026-09-28
authors: Lee Robinson
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---

When building your site on Vercel, you might want to add video assets. Videos can be an important part of your design or content marketing. However, large video files can often lead to excessive bandwidth usage.

For example, you might want a background image as the header on your marketing site.

```html
<video width="320" height="240" loop autoPlay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
```

### Video hosting solutions

You can store files with [Vercel Blob](https://vercel.com/docs/vercel-blob#getting-started), a frontend-friendly solution for storing files in the cloud.

```tsx
import { put } from '@vercel/blob';
 
export async function POST(request: Request) {
  const { searchParams } = new URL(request.url);
  const filename = searchParams.get('filename');
 
  const blob = await put(filename, request.body, {
    access: 'public',
    addRandomSuffix: true
  });
 
  return Response.json(blob);
}
```

You can also host video assets (like `.mp4` and `.gif` files) on dedicated content platforms such as:

- [Vimeo](https://vimeo.com/)
  
- [S3](https://aws.amazon.com/s3/) + [BunnyCDN](https://bunny.net/) / [Cloudfront](https://aws.amazon.com/cloudfront/)
  
- [Mux](https://www.mux.com/for/nextjs)
  
- [Cloudinary](https://cloudinary.com/)
  

Third-party solutions may offer additional options to customize, compress, and transform your video files. It's important to ensure your videos are compressed and optimized regardless of the platform they're being hosted on.

### What about images?

Vercel has built-in [Image Optimization](https://vercel.com/docs/concepts/next.js/image-optimization), which works with zero-configuration using the [Next.js Image Component](https://nextjs.org/docs/basic-features/image-optimization). We recommend using these solutions for optimal [Core Web Vitals](https://nextjs.org/learn/seo/web-performance) and performance.

For example, here's a background image using `next/image` ([Demo](https://image-component.nextjs.gallery/background)):

```jsx
import Image from 'next/image'
import ViewSource from '../components/view-source'
import { bgWrap, bgText } from '../styles.module.css'

const Background = () => (
  <div>
    <ViewSource pathname="pages/background.js" />
    <div className={bgWrap}>
      <Image
        alt="Mountains"
        src="/mountains.jpg"
        layout="fill"
        objectFit="cover"
        quality={100}
      />
    </div>
    <p className={bgText}>
      Image Component
      <br />
      as a Background
    </p>
  </div>
)

export default Background
```

## Related Documentation

- [Next.js](/docs/frameworks/full-stack/nextjs)

## More Vercel Blob guides

- [Build with Vercel Blob on Next.js](/kb/guide/vercel-blob-nextjs): Deploy the Vercel Blob Next.js Starter and learn how client uploads store images securely in a private Blob store.
- [How to upload and store files with Vercel](/kb/guide/how-to-upload-and-store-files-with-vercel): Vercel file uploads done right cover Server Actions, client-direct upload, and multipart for 5 TB files, with auth and caching handled by the SDK.
- [Build Imgur-style image hosting with Nuxt and Vercel Blob](/kb/guide/vercel-blob-nuxt-imgur-clone): Learn how to build an Imgur-style paste-to-share image host using Nuxt and Vercel Blob, with direct-to-storage client uploads, shareable ISR preview pages, and CDN caching at every layer.

## Reference Architecture

Choose a stack and work through the decisions behind it, with curated documentation, guides, templates, and courses to help you build.

- [Agent stack](/kb/architecture/agents): Build and operate agents with models, tools, and durable workflows.
- [Web applications](/kb/architecture/web): Choose rendering, data, authentication, and caching approaches.
- [Backends](/kb/architecture/backends): Choose a runtime, connect services, and run background work.

[Browse all stacks](/kb/architecture)

## Build with prompts

Build an app, extend an agent, or improve your project with ready-to-use prompts for your coding agent.

[Browse the prompt library](/kb/prompts) · [Read the Markdown index](/kb/prompts.md)