Media Hero Vimeo

A MediaHeroVimeo 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 { MediaHeroVimeo, MediaHeroVimeoBackground } from '@hv/ui/hero';
import { mockVimeo } from '@hv/mock/cms';

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

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

Variants

Use theicon above to preview

Variant	Description	Values
MediaHero.paddingTop		regular extra
MediaHero.paddingBottom		regular extra
MediaHero.height		default hero banner

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 Hero with a height of 240 pixels:

<MediaHeroVimeo {...variants} className='h-60'>
  <MediaHeroVimeoBackground>
    <VimeoPlayer {...vimeo}>
      {placeholderImage && (
        <VimeoPlayerOverlay>
          <VimeoPlayerText>Play</VimeoPlayerText>
          <VimeoPlayerImage asChild>
            <img {...placeholderImage} src={placeholderImage.src} />
          </VimeoPlayerImage>
        </VimeoPlayerOverlay>
      )}
      <VimeoPlayerIframe />
    </VimeoPlayer>
  </MediaHeroVimeoBackground>
</MediaHeroVimeo>