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