Media Card Vimeo

A MediaCardVimeo displays a Vimeo video with an optional placeholder image.

Example

Preview

Code

tip

If using this component in a NextJS app, replace the <img/> element used in this code example with the NextJS Image component.

import {
  VimeoPlayer,
  VimeoPlayerImage,
  VimeoPlayerText,
  VimeoPlayerOverlay,
  VimeoPlayerIframe,
} from '@hv/ui/vimeo';
import {
  MediaCardVimeo,
  MediaCardBackgroundVimeo,
} from '@hv/ui/media-card-vimeo';
import { mockVimeo } from '@hv/mock/cms';

export default function MediaCardVimeoExample({ ...variants }) {
  const placeholderImage = mockVimeo?.placeholderImage;

  return (
    <MediaCardVimeo {...variants}>
      <MediaCardBackgroundVimeo asChild>
        <VimeoPlayer {...mockVimeo}>
          {placeholderImage && (
            <VimeoPlayerOverlay>
              <VimeoPlayerText>{`Play`}</VimeoPlayerText>
              <VimeoPlayerImage asChild>
                <img
                  {...placeholderImage}
                  src={`/img/${placeholderImage.src}`}
                />
              </VimeoPlayerImage>
            </VimeoPlayerOverlay>
          )}
          <VimeoPlayerIframe />
        </VimeoPlayer>
      </MediaCardBackgroundVimeo>
    </MediaCardVimeo>
  );
}

Variants

Use theicon above to preview

Variant	Description	Values
height	The component height	default hero banner
paddingTop	The amount of space above the component	regular extra
paddingBottom	The amount of space below the component	regular extra

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all users, update the source code in the UI component library directly.
• Otherwise, you can pass className overrides.

Say you wanted a Vimeo Media Card with a height of 240 pixels:

<MediaCardVimeo {...variants} className='h-60'>
  <MediaCardVimeoBackground asChild>
    <VimeoPlayer {...vimeo}></VimeoPlayer>
  </MediaCardVimeoBackground>
</MediaCardVimeo>