Rate this docs

React Bootstrap IFrame

React IFrame - Bootstrap 4 & Material Design

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, { Component } from "react";
          import { Iframe } from "mdbreact";

          class IframePage extends Component {
            render() {
              return (
                <Iframe height={500} src="https://www.youtube.com/embed/v64KOxKVLVg" />
              );
            }
          }

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

React IFrame - examples & customization

Quickly get a project started with any of our examples.


YouTube IFrame in modal


        <Modal
        size="lg"
        isOpen={this.state.modal11}
        toggle={() => this.toggle(11)}
      >
        <ModalBody className="mb-0 p-0">
          <Iframe
            title="This is a unique title"
            src="https://www.youtube.com/embed/v64KOxKVLVg"
          />
        </ModalBody>
        <ModalFooter className="justify-content-center">
          <span className="mr-4">Spread the word!</span>
          <Button tag="a" size="sm" floating social="fb">
            <Fa icon="facebook" />
          </Button>
          <Button tag="a" size="sm" floating social="tw">
            <Fa icon="twitter" />
          </Button>
          <Button tag="a" size="sm" floating social="gplus">
            <Fa icon="google-plus" />
          </Button>
          <Button tag="a" size="sm" floating social="li">
            <Fa icon="linkedin" />
          </Button>
          <Button
            color="primary"
            outline
            rounded
            size="md"
            className="ml-4"
            onClick={() => this.toggle(11)}
          >
            Close
          </Button>
        </ModalFooter>
      </Modal>
    

Vimeo IFrame in modal


          <Modal
          size="lg"
          isOpen={this.state.modal11}
          toggle={() => this.toggle(11)}
        >
          <ModalBody className="mb-0 p-0">
            <Iframe
              title="This is a unique title"
              src="https://player.vimeo.com/video/115098447"
            />
          </ModalBody>
          <ModalFooter className="justify-content-center">
            <span className="mr-4">Spread the word!</span>
            <Button tag="a" size="sm" floating social="fb">
              <Fa icon="facebook" />
            </Button>
            <Button tag="a" size="sm" floating social="tw">
              <Fa icon="twitter" />
            </Button>
            <Button tag="a" size="sm" floating social="gplus">
              <Fa icon="google-plus" />
            </Button>
            <Button tag="a" size="sm" floating social="li">
              <Fa icon="linkedin" />
            </Button>
            <Button
              color="primary"
              outline
              rounded
              size="md"
              className="ml-4"
              onClick={() => this.toggle(11)}
            >
              Close
            </Button>
          </ModalFooter>
        </Modal>