Responsive embed
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 iframe
s.
The aspect ratio is controlled via the aspectRatio
prop.
<div style={{ width: 660, height: 'auto' }}> <ResponsiveEmbed aspect="a16by9"> <embed type="image/svg+xml" src="/TheresaKnott_castle.svg" /> </ResponsiveEmbed> </div>;
API
ResponsiveEmbedview source file
ResponsiveEmbedview source file
import ResponsiveEmbed from 'react-bootstrap/ResponsiveEmbed'
Name | Type | Default | Description |
---|---|---|---|
aspectRatio | '21by9' | '16by9' | '4by3' | '1by1' | '1by1' | Set the aspect ration of the embed |
children required | element | This component requires a single child element | |
bsPrefix | string | 'embed-responsive' | Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css. |