How to Store Web Videos the Right Way

Formats and codecs

Videos are made up of more than just image and sound - they rely on clearly defined technical foundations. If you understand how formats and codecs work together, you can directly influence quality, file size, and compatibility.

Many people confuse container/format and codec - but both are essential for web videos.

Container / format

The container is the "shell" of a video. It defines which types of audio, video, and subtitles can be included.

• MP4 (.mp4)
  Very widely used, supports video + audio + subtitles, used for websites, social media, and YouTube
• WebM (.webm)
  Open container, optimized specifically for the web, used in modern browsers and HTML5 video
• OGG / OGV (.ogv)
  Open container, less common, used for older web projects and alternative browsersr common    Older web projects, alternative browser support

Codec

The codec describes how the video data is compressed. Different codecs can exist inside the same container.
 

• H.264 / AVC
  High compatibility and good quality, but larger files, typical containers are MP4 and MOV
• H.265 / HEVC
  Very efficient compression, but requires licensing and is not supported everywhere, typical containers are MP4 and MOV
• VP8 / VP9
  Open source and modern, but not supported on all devices, typical container is WebM
• AV1
  Very efficient compression and small file sizes, but slow encoding and limited support, typical containers are WebM and MP4 (experimental)

FPS and bitrate

Frame rate and bitrate have a major impact on how smooth and high-quality a video feels. Even small adjustments in these two areas often have a noticeable effect on perception - and on file size.

Frame rate (FPS) determines how smooth a video looks:

• 30 FPS - Standard for web and social media
• 60 FPS - For fast motion

Bitrate controls the amount of data per second of video. Higher bitrate = better quality, but a larger file.

• 1080p at 30 FPS: 8-12 Mbit/s
• 1080p at 60 FPS: 12-20 Mbit/s
• 4K at 30 FPS: 25-35 Mbit/s
• 4K at 60 FPS: 35-45 Mbit/s

Responsive videos for mobile, tablet, and desktop

Modern websites should deliver videos in a way that makes them load fast and look their best on every device. Different versions for different screen sizes make all the difference.

HTML5 makes it possible to load different video sources depending on the device.
 

Here’s how the code above works in detail:

• The tag is the wrapper and contains all sources as well as the fallback.
• The -elements are checked from top to bottom. The browser uses the first source whose media condition matches and whose type it understands.
• The two lines with media="(max-width: 767px)" deliver the mobile version (first WebM, then MP4 as a fallback).
• The lines with media="(max-width: 1024px)" are intended for tablets.
• The last two -elements without media are the default for larger displays (desktop).
• The text Your browser does not support HTML5 videos. is only shown if no HTML5 video can be played.

Important video attributes explained:

• autoplay - Starts the video automatically when the page loads (only works with muted).
• muted - Turns off the sound, required for autoplay.
• playsinline - Prevents the video from opening in fullscreen on iOS.
• loop - Plays the video endlessly (optional).
• controls - Shows play/pause and browser controls (optional).
• preload - Controls how much the browser preloads (optional: none / metadata / auto).
• poster - Preview image shown before the video starts (optional).
•  - Loads different files depending on screen size.

Social media & YouTube

Videos perform differently on social media and YouTube depending on how they are exported and uploaded. Every platform comes with its own requirements and typical quality levels.

Social media

• Frame rate: 30 FPS
• Bitrate: 8-20 Mbit/s
• Codec: H.264
• Always export from the master video (never from social downloads).

YouTube

• YouTube automatically adjusts resolution, codec, and bitrate.
• Embedding via iFrame

Master video workflow - protecting quality

A clean production workflow makes sure videos look consistently great in every version - from the master file to individual formats for web, social, or mobile devices.

1. Export the master video
   H.264 or AV1, high bitrate, 30-60 FPS
2. Create device-specific versions
   Smartphone 480-720p, tablet 720-1080p, desktop 1080p-4K
3. Create social media versions
   Compress for each platform
4. Never work from social media downloads
   Avoid quality loss

Overview table: devices & platforms

Recommended resolutions, codecs, and bitrates vary significantly depending on the platform. The overview below shows which settings have proven effective for different devices and use cases.

• Master video 
  4K / original, 30-60 FPS, 25-45 Mbit/s, codec H.264 / AV1, base for all versions
• Desktop
  1080p-4K, 30-60 FPS, 8-35 Mbit/s, codec H.264 / VP9, highest quality
• Tablet
  720p-1080p, 30 FPS, 5-15 Mbit/s, codec H.264, moderate quality
• Smartphone
  480p-720p, 30 FPS, 3-8 Mbit/s, codec H.264, optimized for mobile data usage
• Instagram / TikTok / Facebook
  max. 1080p, 30 FPS, 8-20 Mbit/s, codec H.264, platform compression is unavoidable
• YouTube (embed)
  360p-4K automatically, 30-60 FPS, bitrate depends on the platform, codec H.264 / VP9, automatic adjustment

If formats, codecs, and export settings are chosen intentionally, web videos stay flexible to use - from your own website to social media - without noticeable compromises in quality.