React Responsive Iframe Viewer

View iframe content in a responsive container that can:

• Switch between common devices sizes
  • Mobile
  • Tablet
  • Desktop
• Resize using the provided handles
• ✨ all animated & pretty
• 🌚 and with dark mode support

Demo 🚀 / Usage examples 👨‍💻

Getting started

Install

Grab the package from npm:

npm install react-responsive-iframe-viewer

Setup styles

With TailwindCSS

If you use TailwindCSS, you need to mark this package as content:

tailwind.config.js

module.exports = {
  content: [
+   'node_modules/react-responsive-iframe-viewer/**/*.{js,ts,jsx,tsx,html}',
    ...
  ]
}

Dark mode is supported out of the box for TailwindCSS.

Without TailwindCSS

If you don't use TailwindCSS, you can import the styles directly:

import 'react-responsive-iframe-viewer/dist/style.css'

Usage

import { ResponsiveIframeViewer, ViewportSize } from 'react-responsive-iframe-viewer';

<ResponsiveIframeViewer
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="Rick Astley - Never Gonna Give You Up"
  size={ViewportSize.mobile}
/>

Options & Props

src - The URL of the iframe content
title - The title of the iframe content
size - The size of the iframe container
minWidth - The minimum width to resize down to (default: 200)
minHeight - The minimum height to resize down to (default: 200)
showControls - Whether to show device controls or not (default: true)
enabledControls - An array of controls to enable (default: [ViewportSize.mobile, ViewportSize.tablet, ViewportSize.desktop, ViewportSize.fluid])
allowResizingY - Whether to allow resizing the iframe container vertically (default: false)
allowResizingX - Whether to allow resizing the iframe container horizontally (default: false)

Custom sizes

You can provide a custom width/height for the iframe container:

• width - The width of the iframe container
• height - The height of the iframe container

The size prop will be ignored if width and height are provided.

<ResponsiveIframeViewer
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="Rick Astley - Never Gonna Give You Up"
  width={320}
  height={568}
/>

Custom controls

It is possible to only show a subset of the available viewport toggles by passing in a list of enabled controls:

import { ResponsiveIframeViewer, ViewportSize } from "../lib/main";

<ResponsiveIframeViewer
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="Rick Astley - Never Gonna Give You Up"
  size={ViewportSize.mobile}
+  enabledControls={[ViewportSize.mobile, ViewportSize.fluid]}
  allowResizingX
/>

Supported sizes

export const VIEWPORT_SIZES = {
  miniMobile: {
    width: 320,
    height: 480,
  },
  mobile: {
    width: 375,
    height: 667,
  },
  tablet: {
    width: 768,
    height: 1024,
  },
  desktop: {
    width: 1024,
    height: 768,
  },
  fluid: {
    width: "100%",
    height: "100%",
  },

  // Tailwind Viewports
  sm: {
    width: 640,
    height: 1136,
  },

  md: {
    width: 768,
    height: 1024,
  },

  lg: {
    width: 1024,
    height: 768,
  },

  xl: {
    width: 1280,
    height: 720,
  },

  "2xl": {
    width: 1536,
    height: 864,
  },

  "3xl": {
    width: 1920,
    height: 1080,
  },
};