← Web Components

Web Components · Global

<mmm-video>

Responsive video embed — file (src) or YouTube (video-id) — with poster image, play/mute icons, autoplay-on-hover mode, and an "overlay content" layer where you can place a CTA, title, and subtitle positioned per-breakpoint. The largest attribute surface in the library (70+) for fine-grained editorial control.

Overview

Two modes:

  • File video — set src to an MP4 / WebM URL.
  • YouTube video — set video-id to the 11-char YouTube ID.

The overlay layer is positioned independently in landscape and portrait orientations, with 4 breakpoints per orientation. This lets you build hero "shop the video" experiences where the CTA sits over a different part of the frame on each device size.

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-video
  src="https://cdn.commmerce.com/sample-store/hero.mp4"
  aspect-ratio="16/9"
  autoplay="true"
  muted="true"
  loop="true">
</mmm-video>

Source & playback

AttributeTypeDefaultDescription
srcstring—MP4 / WebM URL. Mutually exclusive with video-id.
video-idstring—Commmerce media ID. Resolves via GET /api/v1/media/info/<id> and sets src from the response. Mutually exclusive with src.
thumbnailstring—Poster image URL. Shown before play.
show-thumbnailbooleantrueWhether to show the poster before play.
aspect-ratiostring16/9Aspect ratio — 16/9, 4/3, 1/1, 9/16.
orientationstringlandscapelandscape or portrait.
heightstring43.75remContainer height (overrides aspect-ratio).
object-fitstringcoverCSS object-fit for the video / poster.
autoplaybooleanfalseAutoplay on load. Most browsers require muted="true".
mutedbooleanfalseStart muted.
loopbooleanfalseLoop playback.
play-on-hoverbooleanfalsePlay while hovered, pause on leave.
play-on-clickbooleanfalsePlay / pause toggle on click.
play-pause-enabledbooleantrueShow the centre play / pause icon.
show-mute-btnbooleantrueShow the mute / unmute toggle.
show-content-in-overlaybooleantrueRender the slotted overlay content layer on top of the video.
play-iconstring▶Glyph / image URL for the play icon.
pause-iconstring⏸Glyph / image URL for the pause icon.
mute-iconstring🔇Glyph / image URL for mute.
unmute-iconstring🔊Glyph / image URL for unmute.

Overlay layer

The overlay is a layer on top of the video where you place CTAs / titles via children. Width, height, and content-spacing are configurable per breakpoint and per orientation. Each axis has xl / desktop / tablet / mobile variants for landscape and portrait.

AttributeTypeDefaultDescription
portrait-widthstring100%Width in portrait mode.
overlay-width / overlay-height / overlay-max-width / overlay-max-heightstring100% / auto / 100% / noneOverlay sizing.
content-landscape-width / -height / -max-widthstring100% / auto / 100%Inner content sizing in landscape.
content-portrait-width / -height / -max-widthstring100% / auto / 100%Inner content sizing in portrait.
xl-content-spacing-left / -right / -bottomstring0Content padding on XL viewports. Same set for desktop, tablet, mobile.
landscape-{bp}-width / -left / -right / -bottom / -heightstring—Landscape overlay position + size per breakpoint ({bp} = xl / desktop / tablet / mobile). 20 attrs total.
portrait-{bp}-width / -left / -right / -bottom / -heightstring—Portrait overlay position + size per breakpoint. 20 attrs total.

Total: ~70 attributes. Tune only the ones that matter — every value falls back through to the default if omitted.

Live preview

store sample-store tag <mmm-video>

Examples

1. Looping hero video

<mmm-video
  src="https://cdn.commmerce.com/sample-store/hero.mp4"
  autoplay="true"
  muted="true"
  loop="true"
  aspect-ratio="21/9">
</mmm-video>

2. YouTube embed with thumbnail

<mmm-video
  video-id="dQw4w9WgXcQ"
  thumbnail="https://cdn.commmerce.com/sample-store/poster.jpg"
  show-thumbnail="true"
  aspect-ratio="16/9">
</mmm-video>

3. Hover-to-play product video

<mmm-video
  src="https://cdn.commmerce.com/sample-store/clip.mp4"
  play-on-hover="true"
  muted="true"
  loop="true"
  show-mute-btn="false"
  play-pause-enabled="false"
  aspect-ratio="1/1">
</mmm-video>

4. With overlay CTA positioned bottom-left

<mmm-video
  src="..."
  autoplay="true"
  muted="true"
  show-content-in-overlay="true"
  landscape-desktop-left="3rem"
  landscape-desktop-bottom="3rem"
  landscape-desktop-width="40%">
  <h2>Spring drop</h2>
  <a href="/c/spring">Shop now</a>
</mmm-video>