React Bootstrap Embeds
React Embeds - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
React Bootstrap embeds is a utility which helps you insert video or slideshow in the page keeping width of the parent and scales on any device.
Rules are directly applied to
<iframe>, <embed>, <video>,
and
<object>
elements; optionally use an explicit descendant class .embed-responsive-item when you
want to match
the styling for other attributes.
Pro-Tip! You don’t need to include
frameborder="0"
in your
<iframe>
s as we override that for you.
IFrame
Note: If you are looking for iframe, go to the Iframe component documentation
Example
Wrap any embed like an
<iframe>
in a parent element with .embed-responsive and an aspect ratio. The
.embed-responsive-item
isn’t strictly required, but we encourage it.
import React from 'react'
import { MDBContainer} from 'mdbreact'
const EmbedsPage = () => {
return (
<div className="embed-responsive embed-responsive-16by9">
<iframe className="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM" allowfullscreen></iframe>
</div>
)
}
export default EmbedsPage;
Aspect ratios
Aspect ratios can be customized with modifier classes.
import React from 'react'
import { MDBContainer} from 'mdbreact'
const EmbedsPage = () => {
return (
<MDBContainer>
<div className="embed-responsive embed-responsive-21by9">
<iframe className="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM"></iframe>
</div>
<div className="embed-responsive embed-responsive-16by9">
<iframe className="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM"></iframe>
</div>
<div className="embed-responsive embed-responsive-4by3">
<iframe className="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM"></iframe>
</div>
<div className="embed-responsive embed-responsive-1by1">
<iframe className="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM"></iframe>
</div>
</MDBContainer>
)
}
export default EmbedsPage;
Bootstrap IFrame
Bootstrap IFrame is an HTML document which is embedded in another HTML doc on a web page. IFrames are used to insert content from another source.
With the Bootstrap integration, you can put the content of the IFrame inside modal to make it even more interactive and entertaining.
IFrames in Bootstrap are fully responsive components, adjusting accordingly to the screen size so there's no need to worry about the quality of your content.
Use examples:
- Video tutorial
- Promotional video presentation
- Google Maps in contact section
See the following examples to get a good grip at IFrames.
YouTube IFrame
import React from 'react'
const EmbedsPage = () => {
return (
<div className="embed-responsive embed-responsive-16by9">
<iframe title="Embeds Page" className="embed-responsive-item" src="https://www.youtube.com/embed/v64KOxKVLVg"
allowfullscreen></iframe>
</div>
)
}
export default EmbedsPage;
Vimeo IFrame
import React from 'react'
const EmbedsPage = () => {
return (
<div className="embed-responsive embed-responsive-16by9">
<iframe title="embedsPage" className="embed-responsive-item" src="https://player.vimeo.com/video/137857207"
allowfullscreen></iframe>
</div>
)
}
export default EmbedsPage;