How to Store Web Videos the Right Way

Formats and Codecs

Videos aren’t just picture and sound—they’re built on clear technical foundations. If you understand how formats and codecs work together, you can control quality, file size, and compatibility.

A lot of people mix up container/format and codec—but both are crucial for web videos.

Container / Format

The container is the "wrapper" for a video. It defines what types of audio, video, and subtitles can be included.

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

Codec

The codec defines how the video data is compressed. Different codecs can exist in the same container.
 

• H.264 / AVC
  High compatibility and good quality, but larger files, typical containers: MP4 and MOV
• H.265 / HEVC
  Very efficient compression, but requires a license and isn’t supported everywhere, typical containers: MP4 and MOV
• VP8 / VP9
  Open source and modern, but not supported on all devices, typical container: WebM
• AV1
  Super efficient compression and small files, but slow encoding and limited support, typical containers: WebM and MP4 (experimental)

FPS and Bitrate

Framerate and bitrate are key for how smooth and high-quality your video looks. Small tweaks here can make a big difference in perception—and file size.

Framerate (FPS) decides how smooth your video feels:

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

Bitrate controls how much data per second your video uses. Higher bitrate = better quality, but bigger files.

• 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 that load fast and look great on every device. Different versions for different screen sizes make all the difference.

HTML5 lets you load different video sources depending on the device.
 

Here’s what the code above does, step by step:

• The tag is the wrapper and contains all sources plus the fallback.
• The source elements are checked top to bottom. The browser picks the first source where the media condition matches and the type is supported.
• The two lines with media="(max-width: 767px)" deliver the mobile version (WebM first, then MP4 as fallback).
• The lines with media="(max-width: 1024px)" are for tablets.
• The last two source elements without media are the default for larger screens (desktop).
• The text Dein Browser unterstützt HTML5-Videos nicht. only shows if HTML5 video can’t be played.

Key video attributes explained:

• autoplay – Starts the video automatically when the page loads (only works with muted).
• muted – Mutes the audio, required for autoplay.
• playsinline – Prevents iOS from starting the video in fullscreen.
• loop – Loops 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 you export and upload them. Every platform has its own requirements and typical quality levels.

Social Media

• Framerate: 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.
• Embed via iFrame

Master Video Workflow – Keep Quality High

A clean production workflow makes sure your videos look great in every version—from the master file to web, social, or mobile formats.

1. Export master video
   H.264 or AV1, high bitrate, 30–60 FPS
2. Create device 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

Device & Platform Overview Table

Recommended resolutions, codecs, and bitrates vary a lot depending on the platform. Here’s a quick overview of what works 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, medium quality
• Smartphone
  480p-720p, 30 FPS, 3-8 Mbit/s, codec H.264, optimized for mobile data
• Instagram / TikTok / Facebook
  max. 1080p, 30 FPS, 8-20 Mbit/s, codec H.264, platform compression unavoidable
• YouTube (Embed)
  360p-4K automatically, 30-60 FPS, bitrate depends on platform, codec H.264 / VP9, auto adjustment

If you choose formats, codecs, and export settings intentionally, your web videos stay flexible—from your own website to social media—without sacrificing quality.