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'}}.../>

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically 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 Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Footer

ListGroup