• 3 min read

How to upload a video to Storyblok

This guide explains how to prepare and upload videos correctly in Storyblok. It focuses on what you need to do as an editor.

Digital upload concept with a rocket, video player, and cloud icons. A phone and camera symbolize media creation and sharing.
Photography by: Video tutorial

Find a detailed recording of the assets upload process here.

Table of Content

  1. What you need before uploading

  2. Video requirements

  3. Upload process (step by step)

  4. Important Note

What you need before uploading

Video components like the Search Hero Slider require two versions of the same video, Media Hero requires three versions and Media Blok just one. Check beforehand, which formats you will need.

Here an example of the Search Hero Slider:

  • Desktop video

    • Format: 21:9

    • File name must include: 21x9

  • Mobile video

    • Format: 4:3

    • File name must include: 4x3

Example file names:

  • villa-living-room-21x9.mp4

  • villa-living-room-4x3.mp4

Important:

  • The required format depends on the component you are using

  • Always check the component description to confirm the correct formats

  • The format must always be visible in the file name

Video requirements

Make sure your videos meet these standards:

  • Minimum quality: Full HD

  • Maximum file size: 30 MB

  • Format: .mp4 (not .mov)

  • Search Hero Slider Videos:

    • Maximum length: 15 seconds

    • No branding, logos, or text overlays

Upload process (step by step)

To ensure your videos are processed correctly, always upload them to the Asset Manager first. Do not upload videos directly through the component on the page.

1. Upload the videos to the Asset Manager

  • Open Asset Manager in Storyblok.

  • Upload both video files (desktop and mobile versions).

2. Wait for processing

After uploading the videos, wait approximately 10 minutes before selecting them on a page or uploading another video.

During this time, the system automatically:

  • Processes the Uploadcare metadata

  • Optimizes the videos

  • Generates preview images (posters)

3. Add the videos to your component

  • Open the page you want to edit.

  • Navigate to the relevant video component.

  • Select the processed video files from the Asset Manager.

Important Note

Do not upload videos directly through the video component on the page. The video needs a little time to finish processing after upload. If you select the video too soon, the required metadata may not have been processed yet, which can prevent the video from working correctly.

Always upload the videos to the Asset Manager first, wait for the processing to complete, and then select them from the asset library.

  • We review newly uploaded videos every day to identify any that were uploaded incorrectly or selected before processing was complete. If we find an issue with one of your videos, we'll contact you and let you know how to resolve it. To avoid delays and unnecessary follow-up, please make sure to follow the upload process described above.