Iframe

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.

Examples

Default Iframe example.

import React from "react";
import { CDBIframe, CDBContainer } from "cdbreact";
export const Iframe = () => {
  return (
    <CDBContainer>
      <CDBIframe src="https://www.youtube.com/embed/xnczyP2jSR0"/>
    </CDBContainer>
  );
};

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 to work with it.

Contrast Iframe Import Statement

You need to import the Contrast Iframe component first before using it.

import { CDBIframe } from "cdbreact";

API Reference: Contrast Iframe Properties

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