React Bootstrap Embeds

React Embeds - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

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.

Show code

        
            

        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.

Show code

        
            
            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

Show code

        
            
              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

Show code

        
            
              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;