--- title: "How to Store Web Videos the Right Way" description: "How to store and manage web videos efficiently: formats, platforms, hosting, and best practices for your video content." canonical: "https://www.dc.ag/en/blog/webvideos-speichern" language: "en" last_modified: "2026-05-26" generated: "2026-09-22T00:00:04+02:00" --- # How to Store Web Videos the Right Way How to store and manage web videos efficiently: formats, platforms, hosting, and best practices for your video content. How to Store Web Videos the Right Way Web videos are a core part of modern websites, social media, and YouTube. To make sure they run smoothly on every device and still look high-quality, format, codec, FPS, bitrate, and device-specific versions need to be chosen carefully ## 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. ``` Video ``` 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.