Iframe

React Bootstrap 5 Iframe

React Bootstrap 5 IFrame is a container for another document that is embedded into the current HTML text.

The React Bootstrap 5 Iframe, like all React Bootstrap 5 Components, is extremely responsive. The CDBIframe includes callback props, which allow us to fire functions at certain events, making it more interactive.

Importing the React Bootstrap 5 Iframe Component

To begin using the Contrast React Bootstrap 5 Iframe component, import CDBIframe into your project.

import { CDBIframe } from 'cdbreact';

Default Iframe

import React from 'react';
import { CDBIframe, CDBContainer } from 'cdbreact';

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

Contrast React Bootstrap 5 Iframe Props

This section will expand on your knowledge of the props available for use with the React Bootstrap 5 Iframe component. You'll learn what these props do, what their default values are, and how you'd use them in your code.

The table below provides the various prop options for the CDBIframe component.

Name	Type	Default	Description	Example
className	String	Adds custom classes	Adds custom classes	<CDBIframe className="myClass" ... />
url	String		`Required`. The iframe url	<CDBIframe url="https://www.youtube.com/embed/xnczyP2jSR0" ... />
allowFullScreen	Boolean	false	If set, applies the allowFullScreen param	<CDBIframe allowFullScreen .../>
height	Number		Defines component height	<CDBIframe height={300} .../>
width	Number		Defines component width	<CDBIframe width={300} .../>
id	String		Adds id to the element	<CDBIframe id="my_id" .../>
name	String		Adds name attribute	<CDBIframe name="myIframe" .../>
onLoad	function		Function fired on onLoad event	<CDBIframe onLoad={handleLoad} .../>
onMouseOut	function		Function fired on onMouseOut event	<CDBIframe onMouseOut={handleEvent} .../>
onMouseOver	function		Function fired on onMouseOver event	<CDBIframe onMouseOver={handleEvent} .../>
ratio	String		Defines component ratio. Choose from "1by1", "4by3", "16by9" and "21by9"	<CDBIframe ratio="1by1" .../>
sandbox	String		Adds optional sandbox values: (`no value`) - Applies all restrictions, `allow-forms` - Allows form submission, `allow-modals` Allows to open modal windows, `allow-orientation-lock` Allows to lock the screen orientation, `allow-pointer-lock` Allows to use the Pointer Lock API, `allow-popups` Allows popups, `allow-popups-to-escape-sandbox` Allows popups to open new windows without inheriting the sandboxing, `allow-presentation` Allows to start a presentation session, `allow-same-origin` Allows the iframe content to be treated as being from the same origin, `allow-scripts` Allows to run scripts, `allow-top-navigation` Allows the iframe content to navigate its top-level browsing context, `allow-top-navigation-by-user-activation` Allows the iframe content to navigate its top-level browsing context, but only if initiated by user	<CDBIframe sandbox .../>
title	String		Defines component title	<CDBIframe title="my_title" .../>
style	Object		Add's additional styles.	<CDBIframe style={{color: 'red'}}.../>

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Panel

Select