Media Hero YouTube

A MediaHeroYouTube displays a YouTube video with an optional placeholder image.

Example

Preview

Play

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 {
  YouTubePlayer,
  YouTubePlayerImage,
  YouTubePlayerText,
} from '@hv/ui/youtube';
import { MediaHeroYouTube, MediaHeroYouTubeBackground } from '@hv/ui/hero';
import { mockYoutube } from '@hv/mock/cms';

export default function MediaHeroYouTubeExample({ ...variants }) {
  const placeholderImage = mockYoutube.placeholderImage;

  return (
    <MediaHeroYouTube {...variants}>
      <MediaHeroYouTubeBackground>
        <YouTubePlayer {...mockYoutube}>
          <YouTubePlayerText>{`Play`}</YouTubePlayerText>
          {placeholderImage && (
            <YouTubePlayerImage asChild>
              <img {...placeholderImage} src={`/img/${placeholderImage.src}`} />
            </YouTubePlayerImage>
          )}
        </YouTubePlayer>
      </MediaHeroYouTubeBackground>
    </MediaHeroYouTube>
  );
}

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

<MediaHeroYouTube {...variants} className='h-60'>
  <MediaHeroYouTubeBackground>
    <YouTubePlayer {...mockYoutube}>
      <YouTubePlayerText>Play</YouTubePlayerText>
      {placeholderImage && (
        <YouTubePlayerImage asChild>
          <img {...placeholderImage} src={placeholderImage.src} />
        </YouTubePlayerImage>
      )}
    </YouTubePlayer>
  </MediaHeroYouTubeBackground>
</MediaHeroYouTube>