VideoCard
The VideoCard component is a versatile card component designed to display videos with optional play buttons and durations. It supports both ContentCard and TeaserCard as base card types. The best usage of the VideoCard component is as a child of the VideoModal component.
Importing
To import the VideoCard component, use the following import statement:
_10import { VideoCard } from '@ef-global/backpack/VideoCard';
Props
| Name | Type | Default | Description |
| as | CardType ('ContentCard' or 'TeaserCard') | - | The base card type for the VideoCard. |
| playButton | boolean (optional) | true | Whether to display a play button on the card. |
| showDuration | boolean (optional) | true | Whether to display the video duration on the card. |
| showVideoPreview | boolean (optional) | false | Plays the video for five seconds on mouse hover. |
| videoPreviewUrl | string (optional) | - | Video URL for the video preview, and video duration label |
| aspectRatios | AspectRatioNestedSchema | {s: 'natural'} | An object containing the aspect ratios for different breakpoints. |
| className | string (optional) | - | Additional CSS classes to be applied to the card. |
| children | Array of CardImage, CardTitle, and/or VideoCardDuration elements | - | The child components of the VideoCard, including images, titles, and timestamps. |
| gradient (for TeaserCard only) | CardGradient (optional) | 'default' | The gradient style for the card (when as is set to 'TeaserCard'). |
| ...rest | ContentCardProps or TeaserCardProps | - | The remaining props are passed down to the respective base card components. |
Usage
To use the VideoCard component, provide the required child components as children prop and any optional props as needed:
_10<VideoCard as="ContentCard" href="https://example.com" playButton>_10 <CardImage src="image.jpg" alt="Video thumbnail" />_10 <CardTitle>Title</CardTitle>_10 <VideoCardDuration>10:00</VideoCardDuration>_10</VideoCard>
Examples
VideoCard wrapped in a VideoModal
Here's an example of using the VideoCard component with a ContentCard base, wrapped in a VideoModal:
_12<VideoModal videoUrl="https://example.com/video.mp4">_12 <VideoCard_12 as="TeaserCard"_12 href="https://example.com"_12 playButton_12 gradient="blue"_12 >_12 <CardImage src="image.jpg" alt="Video thumbnail" />_12 <CardTitle>Title</CardTitle>_12 <VideoCardDuration>10:00</VideoCardDuration>_12 </VideoCard>_12</VideoModal>
In this example, the VideoCard is based on the TeaserCard component and has a custom gradient. The play button and duration will be displayed on the card. The VideoCard is wrapped inside a VideoModal, which will display the video when the card is clicked.
VideoCard as ContentCard
Default
)
Title
_10<VideoCard as="ContentCard" playButton={true} {...contentCardProps}>_10 <CardImage src="image.jpg" alt="Image description" />_10 <CardTitle>Title</CardTitle>_10</VideoCard>
With video preview
)
Title
_11<VideoCard_11 as="ContentCard"_11 showVideoPreview={true}_11 videoPreviewUrl={'https://vimeo.com/357511081'}_11 aspectRatios={{s: '16/9'}}_11 playButton={true}_11 {...contentCardProps}_11 >_11 <CardImage src="image.jpg" alt="Image description" />_11 <CardTitle>Title</CardTitle>_11</VideoCard>
Without playButton
Title
_10<VideoCard as="ContentCard" playButton={false} {...contentCardProps}>_10 <CardImage src="image.jpg" alt="Image description" />_10 <CardTitle>Title</CardTitle>_10</VideoCard>
VideoCard as TeaserCard
With playButton, CardTitle, and default gradient
_10<VideoCard as="TeaserCard" playButton={true} gradient="overlay" {...teaserCardProps}>_10 <CardImage src="image.jpg" alt="Image description" />_10 <CardTitle>Title</CardTitle>_10</VideoCard>
With video preview and aspectRatios
_12<VideoCard_12 as="TeaserCard"_12 showVideoPreview={true}_12 videoPreviewUrl={'https://vimeo.com/357511081'}_12 aspectRatios={{s: '16/9'}}_12 playButton={true}_12 gradient="overlay"_12 {...teaserCardProps}_12 >_12 <CardImage src="image.jpg" alt="Image description" />_12 <CardTitle>Title</CardTitle>_12</VideoCard>
With overlay gradient
_10<VideoCard as="TeaserCard" playButton={true} gradient="overlay" {...teaserCardProps}>_10 <CardImage src="image.jpg" alt="Image description" />_10 <CardTitle>Title</CardTitle>_10</VideoCard>
With default gradient, without content
_10<VideoCard as="TeaserCard" playButton={true} gradient="default" {...teaserCardProps}>_10 <CardImage src="image.jpg" alt="Image description" />_10</VideoCard>
VideoCardDuration
The VideoCardDuration component is intended for usage as a child of the VideoCard component, and it showcases the video's duration. If the videoPreviewUrl prop is provided and the hosting platform, like Vimeo, supports it, the duration is automatically fetched. For platforms that don't provide this feature, such as YouTube, the VideoCardDuration component is needed to display the video length.
Importing
To import the VideoCardDuration component, use the following import statement:
_10import { VideoCardDuration } from '@ef-global/backpack/VideoCard';
Usage
To use the VideoCardDuration component, simply add it to the VideoCard component's children as a slot. The VideoCardDuration component will then display the timestamp on the video thumbnail.
_10<VideoCard {...videoCardProps}>_10 <CardImage src="image.jpg" alt="Image description" />_10 <CardTitle>Title</CardTitle>_10 <VideoCardDuration>{duration}</VideoCardDuration>_10</VideoCard>
For a more complete example that includes the VideoModal component, refer to the following snippet:
_10<VideoModal videoUrl={videoUrl} {...modalProps}>_10 <VideoCard as="ContentCard" href="https://example.com" playButton>_10 <CardImage src="image.jpg" alt="Image description" />_10 <CardTitle>Title</CardTitle>_10 <VideoCardDuration>00:00</VideoCardDuration>_10 </VideoCard>_10</VideoModal>