Search...

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.

js
import { CDBIframe } from 'cdbreact';

Default Iframe

js
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.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classesAdds custom classes<CDBIframe className="myClass" ... />
urlStringRequired. The iframe url<CDBIframe url="https://www.youtube.com/embed/xnczyP2jSR0" ... />
allowFullScreenBooleanfalseIf set, applies the allowFullScreen param<CDBIframe allowFullScreen .../>
heightNumberDefines component height<CDBIframe height={300} .../>
widthNumberDefines component width<CDBIframe width={300} .../>
idStringAdds id to the element<CDBIframe id="my_id" .../>
nameStringAdds name attribute<CDBIframe name="myIframe" .../>
onLoadfunctionFunction fired on onLoad event<CDBIframe onLoad={handleLoad} .../>
onMouseOutfunctionFunction fired on onMouseOut event<CDBIframe onMouseOut={handleEvent} .../>
onMouseOverfunctionFunction fired on onMouseOver event<CDBIframe onMouseOver={handleEvent} .../>
ratioStringDefines component ratio. Choose from "1by1", "4by3", "16by9" and "21by9"<CDBIframe ratio="1by1" .../>
sandboxStringAdds 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 .../>
titleStringDefines component title<CDBIframe title="my_title" .../>
styleObjectAdd'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.