Variants
Example of Responsive Media - default
React documentation
Last modified:
BcResponsiveMedia Props
| Prop | Type | Required? | Default | Description |
|---|---|---|---|---|
| variant | string | false | Switch between different video variants. | |
| isVideo | boolean | false | false | Switch between either img or video tag. |
| src | string | true | Switch between image or video url. | |
| alt | string | false | Used to provide alternative text when image fails to load for screen readers. | |
| videoTitle | string | false | Used to identify the content or purpose of the <iframe> for screen readers. |
Possible values for variant prop
| Prop | Value | Description |
|---|---|---|
| variant | vid-4x3 | Used for maintaining an video’s existing 4:3 aspect ratio. |
| variant | vid-16x9 | Used for maintaining an video’s existing 16:9 aspect ratio. |
Yes:
React.HTMLAttributes<HTMLDivElement>for divReact.IframeHTMLAttributes<HTMLIFrameElement>for iframe
HTML
Last modified:
Use semantic markup for the media, eg. an <img> or <video>.
You can add captions using <figure> and <figcaption>.
Design
Last modified:
TODO
Accessibility
Last modified:
Use semantic markup (see also HTML section).
Ensure images receive human-readable alt text descriptions.
Rationale
Last modified:
It is important to maintain the intrinsic ratios when sizing embedded media in responsive layouts.
CSS: We’re using the old padding-bottom method instead of the new and simpler aspect-ratio, despite widespread browser support. We may remain with this older method as Email CSS support for aspect-ratio is unlikely in the future.
See also
Last modified: