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 iframes.

    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>;
    
    Press esc to disable tab trapping

    API

    ResponsiveEmbedview source file

    import ResponsiveEmbed from 'react-bootstrap/ResponsiveEmbed'
    NameTypeDefaultDescription
    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.