🤩
Windframe Import update is finally here!

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

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

ad-banner

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