decocms/storefront-skills/video

Video in deco.cx

Deco serves uploaded videos through its media server at https://decoims.com. The most common question about video is "why does my video have no sound?" — the short answer is that deco strips the audio track by default and you re-enable it with ?muted=false.

Why videos are silent by default

When a video is uploaded to a deco storefront, the media server (decoims.com) serves an audio-stripped version by default. This keeps the file small and is what browsers need for muted autoplay.

The behavior is controlled by a muted query parameter on the media URL:

The version with sound is a physically different (larger) file — the audio is genuinely absent from the default one, not just muted in the player. So no player setting will bring the sound back unless the URL requests the audio version.

Enable sound

Option A — media URL (always works): append ?muted=false to the video URL.

https://decoims.com/<site>/<id>/<file>.mp4?muted=false

Option B — CMS panel (no code): in the deco Admin, open the section/page holding the video and turn off the video's muted option. The CMS then serves the URL with ?muted=false. The exact label depends on the section, but it maps to the same media parameter.

Browser autoplay vs. sound — the important caveat

Getting the audio version of the file (?muted=false) is only half the story. Browsers block autoplay of videos that have sound. A video will only autoplay if it is muted; to play with sound it needs a user gesture (click/tap) or controls.

So there are two independent layers:

1. The file — does the served .mp4 contain an audio track? Controlled by ?muted=false on the media URL (deco media server).
2. The player — is the <video> element muted / autoplaying? Controlled by the muted and autoPlay HTML attributes.

Common combinations:

You cannot have a video that autoplays and starts with audible sound — that is a browser policy, not a deco limitation.

The Video component

Import: apps/website/components/Video.tsx

import { forwardRef } from "preact/compat";
import type { JSX } from "preact";
import { getOptimizedMediaUrl, getSrcSet } from "./Image.tsx";
export type Props =
  & Omit<JSX.IntrinsicElements["video"], "width" | "height" | "preload">
  & {
    src: string;
    width: number;
    height: number;
    forceOptimizedSrc?: boolean;
  };

It renders a native <video> and spreads all standard video attributes through ({...props}), so any HTML <video> attribute works directly:

import Video from "apps/website/components/Video.tsx";
// Silent, autoplaying background video
<Video
  src="https://decoims.com/site/id/hero.mp4"
  width={1280}
  height={720}
  autoPlay
  muted
  loop
  playsInline
/>
// Video the user plays with sound
<Video
  src="https://decoims.com/site/id/promo.mp4?muted=false"
  width={1280}
  height={720}
  controls
/>

Troubleshooting: "the video has no sound"

1. Check the media URL. If it ends in .mp4 with no ?muted=false, the served file has no audio track. → Add ?muted=false, or turn off muted for that video in the CMS panel.
2. Check the player. If the URL already has ?muted=false but it is still silent, the <video> element is probably muted (required if it also autoPlays). → Remove muted/autoPlay, add controls, or add an unmute button. Remember: autoplay-with-sound is blocked by browsers.
3. Verify. Open the media URL with ?muted=false directly in a browser tab — it should now play with audio (and download a slightly larger file than the default URL).

Caching note

Videos are served with Cache-Control: public, max-age=31536000, immutable (1 year). The muted and non-muted variants are cached under different URLs, so switching ?muted=false fetches a fresh, separately-cached file — no cache-busting needed.