furl

Iframe

Iframes allow you to embed external content.

Examples

Giant Pandas 101 | Nat Geo Wild
import React from 'react';
import ReactDOM from 'react-dom';
import { Iframe } from 'furl-components';

ReactDOM.render(
  <Iframe
    width={560}
    height={315}
    src="https://www.youtube.com/embed/dqT-UlYlg1s"
    allowFullScreen
  />, 
  document.getElementById('root')
);

API

Iframe props
Property Description Type Default
src iframe source url string
alt iframe alternate text string 'An embed'
withCaption render captioned figure boolean false
allowFullscreen allow fullscreen mode boolean false
width iframe with int/string 'auto'
height iframe height int/string 'auto'

Notes

  • It is highly recommended you specify a descriptive value for alt to make your embedded content accessible to screen-readers. This is why we already provide a default value instead of using an empty string or undefined.
  • If you provide withCaption, the component will render a <figure> and a <figcaption> accompanying the <iframe> element. The value of alt will be used for the <figcaption>.
  • width and height accept any valid CSS value, including CSS variables.