Responsive Media

Last modified:

A container to preserve width:height aspect ratios of videos and images as they scale in size.


Example of Responsive Media - default

React documentation

Last modified:

BcResponsiveMedia Props

variantstringfalseSwitch between different video variants.
isVideobooleanfalsefalseSwitch between either img or video tag.
srcstringtrueSwitch between image or video url.
altstringfalseUsed to provide alternative text when image fails to load for screen readers.
videoTitlestringfalseUsed to identify the content or purpose of the <iframe> for screen readers.

Possible values for variant prop

variantvid-4x3Used for maintaining an video’s existing 4:3 aspect ratio.
variantvid-16x9Used for maintaining an video’s existing 16:9 aspect ratio.


  • React.HTMLAttributes<HTMLDivElement> for div
  • React.IframeHTMLAttributes<HTMLIFrameElement> for iframe


Last modified:

Use semantic markup for the media, eg. an <img> or <video>.

You can add captions using <figure> and <figcaption>.


Last modified:



Last modified:

Use semantic markup (see also HTML section).

Ensure images receive human-readable alt text descriptions.


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: