React IFrame

React Bootstrap IFrame - 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

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.

Basic example

YouTube IFrame

        
            
          import React from "react";
          import { MDBContainer, MDBIframe } from "mdbreact";

          const IframePage = () => {
            return (
              <MDBContainer className="text-center">
                <MDBIframe src="https://www.youtube.com/embed/v64KOxKVLVg" />
              </MDBContainer>
            );
          }

          export default IframePage;

React IFrame - API

In this section you will find advanced information about the IFrame component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

IFrame import statement

In order to use IFrame component make sure you have imported proper module first.

        
            
          import { MDBIframe } from "mdbreact";

IFrame PropTypes

The table below shows the configuration options of the IFrame component.

Name Type Default Description Example
allowFullScreen boolean If set, applies the allowFullScreen param <MDBIframe allowFullScreen ... />
className string Adds custom class to the element <MDBIframe className="myClass" ... />
height number Defines component height <MDBIframe height={300} ... />
id string Adds id to the element <MDBIframe id="myId" ... />
name string Adds name attribute <MDBIframe name="myIframe" ... />
onMouseOver function Function fired on onMouseOver event <MDBIframe onMouseOver={this.handleEvent} ... />
onMouseOut function Function fired on onMouseOut event <MDBIframe onMouseOut={this.handleEvent} ... />
onLoad function Function fired on onLoad event <MDBIframe onLoad={this.handleEvent} ... />
sandbox boolean Adds optional sandbox values <MDBIframe sandbox ... />
src string Required. The iframe url <MDBIframe src="https://www.youtu..." ... />
style object Add's additional styles. <MDBIframe style={{color: "red"}} ... />
title string Defines component title <MDBIframe titile="My title" ... />
ratio string Defines component ratio. Choose from "1by1", "4by3", "16by9" and "21by9" <MDBIframe ratio="4by3" ... />
width number Defines component width <MDBIframe width={300} ... />

React IFrame - examples & customization

Quickly get a project started with any of our examples.

YouTube IFrame in modal

Spread the word! 
        
            
        import React, { Component } from "react";
        import {
          MDBContainer,
          MDBBtn,
          MDBModal,
          MDBModalBody,
          MDBModalFooter,
          MDBIcon,
          MDBIframe,
        } from "mdbreact";
        
        class IframePage extends Component {
          state = {
            modal11: false,
          };
        
          toggle = (nr) => () => {
            let modalNumber = "modal" + nr;
            this.setState({
              ...this.state,
              [modalNumber]: !this.state[modalNumber],
            });
          };
        
          render() {
            return (
              <MDBContainer>
                <MDBBtn onClick={this.toggle(11)}>Launch Modal</MDBBtn>
                <MDBModal
                  size="lg"
                  isOpen={this.state.modal11}
                  toggle={this.toggle(11)}
                >
                  <MDBModalBody className="mb-0 p-0">
                    <MDBIframe
                      title="This is a unique title"
                      src="https://www.youtube.com/embed/v64KOxKVLVg"
                    />
                  </MDBModalBody>
                  <MDBModalFooter className="justify-content-center">
                    <span className="mr-4">Spread the word!</span>
                    <MDBBtn tag="a" size="sm" floating social="fb">
                      <MDBIcon fab icon="facebook-f" />
                    </MDBBtn>
                    <MDBBtn tag="a" size="sm" floating social="tw">
                      <MDBIcon fab icon="twitter" />
                    </MDBBtn>
                    <MDBBtn tag="a" size="sm" floating social="gplus">
                      <MDBIcon fab icon="google-plus-g" />
                    </MDBBtn>
                    <MDBBtn tag="a" size="sm" floating social="li">
                      <MDBIcon fab icon="linkedin-in" />
                    </MDBBtn>
                    <MDBBtn
                      color="primary"
                      outline
                      rounded
                      size="md"
                      className="ml-4"
                      onClick={this.toggle(11)}
                    >
                      Close
                    </MDBBtn>
                  </MDBModalFooter>
                </MDBModal>
              </MDBContainer>
            );
          }
        }
        
        export default IframePage;

Vimeo IFrame in modal

Spread the word! 
        
            
        import React, { Component } from "react";
        import {
          MDBBtn,
          MDBModal,
          MDBModalBody,
          MDBModalFooter,
          MDBRow,
          MDBIcon,
          MDBIframe,
        } from "mdbreact";
        
        class IframePage extends Component {
          state = {
            modal11: false,
          };
        
          toggle = (nr) => () => {
            let modalNumber = "modal" + nr;
            this.setState({
              ...this.state,
              [modalNumber]: !this.state[modalNumber],
            });
          };
        
          render() {
            return (
              <MDBRow>
                <MDBBtn onClick={this.toggle(11)}>Launch Modal</MDBBtn>
                <MDBModal
                  size="lg"
                  isOpen={this.state.modal11}
                  toggle={this.toggle(11)}
                >
                  <MDBModalBody className="mb-0 p-0">
                    <MDBIframe
                      title="This is a unique title"
                      src="https://player.vimeo.com/video/115098447"
                    />
                  </MDBModalBody>
                  <MDBModalFooter className="justify-content-center">
                    <span className="mr-4">Spread the word!</span>
                    <MDBBtn tag="a" size="sm" floating social="fb">
                      <MDBIcon fab icon="facebook" />
                    </MDBBtn>
                    <MDBBtn tag="a" size="sm" floating social="tw">
                      <MDBIcon fab icon="twitter" />
                    </MDBBtn>
                    <MDBBtn tag="a" size="sm" floating social="gplus">
                      <MDBIcon fab icon="google-plus" />
                    </MDBBtn>
                    <MDBBtn tag="a" size="sm" floating social="li">
                      <MDBIcon fab icon="linkedin" />
                    </MDBBtn>
                    <MDBBtn
                      color="primary"
                      outline
                      rounded
                      size="md"
                      className="ml-4"
                      onClick={this.toggle(11)}
                    >
                      Close
                    </MDBBtn>
                  </MDBModalFooter>
                </MDBModal>
              </MDBRow>
            );
          }
        }
        
        export default IframePage;