Media

import { Media } from '@bbc/front-end-kit/vue/showpad'

A Vue component that renders Showpad assets as images or videos depending on the asset type. Provides a load stage to prevent the component from rendering before the asset is ready.

Getting started

<template>
    <div>
        <!-- Load a media asset from a Showpad asset object -->
        <Media :asset="showpadAsset" />
        
        <!-- Load a media asset from a URL (project asset folder or other resource) -->
        <Media url="/assets/video.mp4" />

        <!-- Config-driven: let Showpad inject an asset via the config workflow -->
        <Media data-sp="path.to.media" />
    </div>
</template>

<script setup>
import { Media } from '@bbc/front-end-kit/vue/showpad'
</script>

Why it uses a video element

The Media component uses a <video> element for all media. It determines whether to use the poster attribute (for images) or src (for videos) based on the file extension of the resolved URL.

This allows images and videos to be handled seamlessly without separate <img> / <video> branching in consuming components.

Showpad config workflow

The <video> element has data-sp-asset="asset" hardcoded. This is fixed it is not configurable via a prop.

Because Vue forwards extra attributes ($attrs) to the root element by default, you can pass data-sp="your.path" directly to <Media> and it lands on the <video> element alongside the hardcoded data-sp-asset. This triggers both the ConfigGenerator scan (to generate the config.json entry) and the Config injection pass (to replace the default asset with one from Showpad at runtime).

This is the standard Global-to-Local pattern: a project asset serves as the default during development, and local markets can override it via Showpad without touching the codebase.

Preloading

The component resolves the source URL on mount. Images are preloaded via a temporary Image object; the --loaded CSS class is applied once the asset is ready, triggering a fade-in via the built-in opacity transition.

API

Properties

asset

The Showpad asset object to use as the media source. The component calls useSpStore.getAssetPreview() to resolve the preview URL.

Values: Showpad Asset

Default: null

url

A direct URL to the media asset. Takes precedence over asset when provided.

Values: String

Default: ''