What are the best practices for hosting videos on Vercel?

When building your Next.js 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.

1
<video width="320" height="240" loop autoPlay>
2
  <source src="movie.mp4" type="video/mp4">
3
  <source src="movie.ogg" type="video/ogg">
4
  Your browser does not support the video tag.
5
</video>

Video Hosting Solutions

We recommend hosting video assets (like .mp4 and .gif files) on dedicated content platforms like:

• YouTube
• Vimeo
• S3 + BunnyCDN / Cloudfront
• Mux
• Cloudinary

Moving these assets to a third-party solution will help reduce your usage on Vercel, as well as potentially unlocking 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, which works with zero-configuration using the Next.js Image Component. We recommend using these solutions for optimal Core Web Vitals and performance.

For example, here's a background image using next/image (Demo):

1
import Image from 'next/image'
2
import ViewSource from '../components/view-source'
3
import { bgWrap, bgText } from '../styles.module.css'
4

5
const Background = () => (
6
  <div>
7
    <ViewSource pathname="pages/background.js" />
8
    <div className={bgWrap}>
9
      <Image
10
        alt="Mountains"
11
        src="/mountains.jpg"
12
        layout="fill"
13
        objectFit="cover"
14
        quality={100}
15
      />
16
    </div>
17
    <p className={bgText}>
18
      Image Component
19
      <br />
20
      as a Background
21
    </p>
22
  </div>
23
)
24

25
export default Background