---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/deliver-videos-through-the-video-cdn"
locale: en
meta:
"og:title": "Academy Article"
---
[Go to home](https://academy.laioutr.com/en)
- [Hosting and operations](https://academy.laioutr.com/en/bereiche/hosting-and-operations)
- [Laioutr Cloud](https://academy.laioutr.com/en/leitfaeden/laioutr-cloud)
- [Deliver videos through the Video CDN](https://academy.laioutr.com/en/artikel/deliver-videos-through-the-video-cdn)
# Deliver videos through the Video CDN
Editors upload videos to the Laioutr CDN media library in Studio and pick them in a section. The CDN delivers them from the project's hostname with an automatically generated poster, and optionally also adaptively as HLS and DASH.
## Before you start
- Plan
- Video CDN package of the Laioutr CDN
- Role
- Edit permission in Studio
- Duration
- 6 min
### Prerequisites
- Laioutr CMS enabled under Integrations
- Video as MP4 with H.264 and AAC or MP3
Last reviewed on October 15, 2026
A product clip, a background loop in the hero or a campaign feed: for the storefront, each is the same job. Editors pick a video in Studio, and the storefront plays it without anyone waiting. The **Video CDN** uses the same storage, hostname and cache as images.
### Upload requirements
- MP4 with H.264 video and AAC or MP3 audio
- at most 100 MB and 10 minutes
A video can be played right after upload; there is no processing queue. A poster is generated automatically and adapts to the layout width. Videos only load when they come close to the visible area, and they stay cached for a year. Every upload gets its own address; a replaced video does not overwrite the old file.
**Adaptive delivery** as HLS and DASH can be switched on per project. Signed URLs, DRM, watermarking and per-video analytics are not part of the Video CDN; an external video provider can be connected as an app for those.
## Step by step
1. 1 ### Step 1: Prepare the video Export the video as MP4 with H.264 and AAC or MP3 audio, at most 100 MB and 10 minutes long, at the size it should be delivered.
2. 2 ### Step 2: Upload the video Open the Laioutr CDN media library in Studio and upload the video.
3. 3 ### Step 3: Pick it in a section In a section with a media field, such as a hero, choose the video from the media picker.
4. 4 ### Step 4: Check the preview Check the poster and playback in the preview, whether as a player with controls or as a muted background loop.
5. 5 ### Step 5: Publish Publish the page.
6. 6 ### Step 6: Switch on adaptive delivery For HLS and DASH, ask Laioutr support to enable adaptive delivery for the project. Afterwards, pick videos that are already placed again in Studio.
## Check the result
The published page shows the video with its poster, and the video address starts with the project's delivery hostname. With adaptive delivery, Safari plays the HLS variant.
## Frequently asked questions
Why is an upload rejected?
The file is outside the requirements: wrong container or codec, over 100 MB or longer than 10 minutes. Other files in the same upload are not affected.
How is a video replaced?
Upload the new video and pick it in the section. Every upload gets its own address, so returning visitors never see an outdated version from the cache.
Do Chrome and Firefox play adaptively?
Without an additional player, they play the MP4 file. Adaptive bitrate in these browsers comes from a custom player that developers register in the project.
Are DRM or watermarks available?
No. Delivery is public, because storefront media is public content. For long-form video, DRM or per-video analytics, connect an external video provider as an app.
## Related
- [Deliver images through the Laioutr CDN](https://academy.laioutr.com/en/artikel/deliver-images-through-the-laioutr-cdn)4 min
The Laioutr CDN stores a project's images in a dedicated store and delivers them from the project's own hostname. Size and format are adapted at the edge on request, and delivered images stay cached for a long time.
- [Manage media in Cockpit and Studio](https://academy.laioutr.com/en/artikel/manage-media-in-cockpit-and-studio)5 min
Images, videos and audio files are managed centrally in the Media Library under Content in Cockpit. In Studio, the media picker selects files from every connected library, such as the shop system, and uploads new ones where the library allows it.
- [Images and video, popups, notifications and in-page navigation](https://academy.laioutr.com/en/artikel/images-video-popups-notifications-in-page-navigation)7 min
Media + Text and Media Preview show images and videos, PopUp presets present info, newsletter and offers, and toasts and alert dialogs give automatic feedback. Category Card Grid and Slider lead into product ranges within the page.
- [Preview and publish changes in Studio](https://academy.laioutr.com/en/artikel/preview-and-publish-changes-in-studio)5 min
Studio saves changes as a draft and shows them instantly in the live preview. Publish in the top bar takes the saved state to the storefront through a deployment of the environment.
## Learn it in a lesson
- [Manage and deliver media](https://academy.laioutr.com/en/lektionen/frontend-manager-manage-media)8 min
- [Add images and videos](https://academy.laioutr.com/en/lektionen/go-live-add-images-and-videos)6 min
## [Laioutr Cloud](https://academy.laioutr.com/en/leitfaeden/laioutr-cloud)
Search this guide
1. [Hosting and edge delivery](https://academy.laioutr.com/en/artikel/hosting-and-edge-delivery)4 min
2. [Connect a custom domain](https://academy.laioutr.com/en/artikel/connect-a-custom-domain)6 min
3. [Password-protect the storefront until launch](https://academy.laioutr.com/en/artikel/password-protect-the-storefront-until-launch)5 min
4. [Deliver images through the Laioutr CDN](https://academy.laioutr.com/en/artikel/deliver-images-through-the-laioutr-cdn)4 min
5. [Deliver videos through the Video CDN](https://academy.laioutr.com/en/artikel/deliver-videos-through-the-video-cdn)6 min
6. [Protect forms from bots and spam](https://academy.laioutr.com/en/artikel/protect-forms-from-bots-and-spam)7 min
7. [Deliver the storefront as a progressive web app](https://academy.laioutr.com/en/artikel/deliver-the-storefront-as-a-progressive-web-app)5 min
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "en",
"name": "Default",
"url": "https://academy.laioutr.com/",
"translationOfWork": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/deliver-videos-through-the-video-cdn#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/en/artikel/deliver-videos-through-the-video-cdn",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/en/artikel/deliver-videos-through-the-video-cdn#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/en/artikel/deliver-videos-through-the-video-cdn#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/en/artikel/deliver-videos-through-the-video-cdn#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/en/artikel/deliver-videos-through-the-video-cdn#/schema/question/3"
},
{
"@id": "https://academy.laioutr.com/en/artikel/deliver-videos-through-the-video-cdn#/schema/question/4"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/en/artikel/deliver-videos-through-the-video-cdn"
]
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/deliver-videos-through-the-video-cdn#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/en",
"position": 1
},
{
"@type": "ListItem",
"name": "Hosting and operations",
"item": "https://academy.laioutr.com/en/bereiche/hosting-and-operations",
"position": 2
},
{
"@type": "ListItem",
"name": "Laioutr Cloud",
"item": "https://academy.laioutr.com/en/leitfaeden/laioutr-cloud",
"position": 3
},
{
"@type": "ListItem",
"name": "Deliver videos through the Video CDN",
"item": "https://academy.laioutr.com/en/artikel/deliver-videos-through-the-video-cdn",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/deliver-videos-through-the-video-cdn#/schema/question/1",
"@type": "Question",
"inLanguage": "en",
"name": "Why is an upload rejected?",
"acceptedAnswer": {
"@type": "Answer",
"text": "The file is outside the requirements: wrong container or codec, over 100 MB or longer than 10 minutes. Other files in the same upload are not affected.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/deliver-videos-through-the-video-cdn#/schema/question/2",
"@type": "Question",
"inLanguage": "en",
"name": "How is a video replaced?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Upload the new video and pick it in the section. Every upload gets its own address, so returning visitors never see an outdated version from the cache.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/deliver-videos-through-the-video-cdn#/schema/question/3",
"@type": "Question",
"inLanguage": "en",
"name": "Do Chrome and Firefox play adaptively?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Without an additional player, they play the MP4 file. Adaptive bitrate in these browsers comes from a custom player that developers register in the project.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/deliver-videos-through-the-video-cdn#/schema/question/4",
"@type": "Question",
"inLanguage": "en",
"name": "Are DRM or watermarks available?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No. Delivery is public, because storefront media is public content. For long-form video, DRM or per-video analytics, connect an external video provider as an app.
"
}
}
]
}
```