Media Card YouTube

A MediaCardYouTube displays a YouTube 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 {
  YouTubePlayer,
  YouTubePlayerImage,
  YouTubePlayerText,
} from '@hv/ui/youtube';
import {
  MediaCardYouTube,
  MediaCardBackgroundYouTube,
} from '@hv/ui/media-card-youtube';
import { mockYoutube } from '@hv/mock/cms';

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

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

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

<MediaCardYouTube {...variants} className='h-60'>
  <MediaCardYouTubeBackground asChild>
    <YouTubePlayer {...YouTube}></YouTubePlayer>
  </MediaCardYouTubeBackground>
</MediaCardYouTube>