Utilities

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

You don't need to include frameborder="0" in your iframes.

Either 16by9 or 4by3 aspect ratio via a16by9 or a4by3 attribute must be set.

<div style={{ width: 660, height: 'auto' }}>
  <ResponsiveEmbed a16by9>
    <embed type="image/svg+xml" src="/TheresaKnott_castle.svg" />
  </ResponsiveEmbed>
</div>;

#Props

NameTypeDefaultDescription
children required
element

This component requires a single child element

a16by9
boolean
false

16by9 aspect ratio

a4by3
boolean
false

4by3 aspect ratio

bsClass
string
'embed-responsive'

Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.