How to Add Video Content to Prismic with Minimal Bandwidth Usage
When adding videos to your Prismic content, it's important to minimize CDN bandwidth consumption. This guide walks you through best practices and implementation strategies.
Why Not Store Videos Directly in Prismic?
Storing raw video files in Prismic consumes significant CDN bandwidth every time a visitor views your content. Instead, we recommend embedding videos from external hosting platforms that are optimized for video delivery.
Best Practice #1: Use External Video Hosting
Don't store raw video files in Prismic. Instead, embed videos from specialized platforms designed to handle video efficiently:
YouTube/Vimeo – Free hosting with iframe embeds (recommended for most cases)
Cloudinary – Excellent compression and optimization
Mux – Adaptive bitrate streaming
Bunny CDN – Video streaming optimized for performance
The key: Store only the embed URL or video ID in Prismic, never the actual video file.
Best Practice #2: Optimize Videos Before Uploading (If Using Premium Hosts)
If you're using a platform like Cloudinary or Mux, optimize your source file first:
Compression Settings:
Codec: H.264 (better compression than VP8/VP9)
Bitrate: 2-5 Mbps (adjust based on resolution)
Resolution:
720p for most web use cases
1080p only when necessary
Format: WebM offers better compression than MP4
Recommended Tools:
FFmpeg (command line)
HandBrake (GUI application)
Online compression services
Best Practice #3: Use the Code Embed Slice
The fastest way to add videos to Prismic is using the Code Embed Slice with an external video URL.
Step-by-Step: Adding a YouTube Video
1. Get your YouTube video ID:
Find your video on YouTube
Copy the video ID from the URL
Example:
https://www.youtube.com/watch?v=dQw4w9WgXcQVideo ID:
dQw4w9WgXcQ
2. Add a Code Embed Slice to your document
3. Paste the responsive embed code:
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
4. Replace dQw4w9WgXcQ with your actual video ID
This code automatically maintains a 16:9 aspect ratio and adapts to any screen size.
Key Advantages of This Approach
✅ Zero Prismic CDN bandwidth used – YouTube handles all video delivery
✅ Responsive design – Works perfectly on mobile, tablet, and desktop
✅ Fast loading – YouTube's global CDN ensures quick delivery
✅ Easy updates – Change videos without editing your code slice
Summary
The best way to add videos to Prismic is:
Host your video on YouTube, Vimeo, or another external platform
Use the Code Embed Slice
Paste the responsive iframe code with your video ID
Publish and enjoy zero bandwidth consumption
This approach keeps your content lightweight and your CDN costs minimal.