@wmcadigital/ui-video-embed

Embeds a responsive video onto the page.

Installation

Using pnpm (monorepo/workspace):

pnpm add @wmcadigital/ui-video-embed

Using npm:

npm install @wmcadigital/ui-video-embed

Using yarn:

yarn add @wmcadigital/ui-video-embed

What this package provides

• Compiled CSS for a responsive video embed: dist/styles/main.css.
• SCSS source lives in src/styles/main.scss and provides the following CSS class:
  • .ds-video-embed — a responsive container which preserves a 16:9 aspect ratio and positions iframe, object, or embed children to fill the container.

This package is styling-only — it does not export a JavaScript component. Import the package (or its CSS) in your build to include the styles.

Usage

Include the stylesheet directly in HTML:

<link rel="stylesheet" href="/node_modules/@wmcadigital/ui-video-embed/dist/styles/main.css" />

Or import the styles from your entry point (recommended for bundlers):

import '@wmcadigital/ui-video-embed';
// or import '@wmcadigital/ui-video-embed/dist/styles/main.css'

HTML example:

<div class="ds-video-embed">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Descriptive video title"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>

Notes:

• The container sets padding-bottom: 56.25% to achieve a 16:9 aspect ratio. Adjust the padding if you need a different ratio.
• The inner iframe, object, or embed is absolutely positioned to fill the container.

Accessibility

• Provide a meaningful title on the iframe to describe the video content for screen reader users.
• If the video is decorative, mark it appropriately and ensure surrounding text communicates necessary information.

Customisation

• Override the aspect ratio by adjusting the container padding:

.ds-video-embed {
  padding-bottom: 75%; /* 4:3 aspect ratio */
}

• Theme colours and other global tokens follow the monorepo design system variables where applicable.

Development

This package is built by the monorepo build scripts. From the repository root run:

pnpm -w -r run build

See the monorepo README.md and DOCS/ for contributing and publishing guidelines.