iFrame – Responsive Embeds for Videos, Maps, Websites & Docs

Description

Live Demo | Support

iFrame puts any web content inside your pages — videos, maps, playlists, design files, documents or whole websites — in an iframe that actually behaves.

Paste a link, get a working embed. Normal page links from YouTube, Vimeo, Dailymotion, Google Maps, Spotify, Loom and Figma are rewritten to their embeddable form automatically; YouTube even switches to the privacy-enhanced no-cookie player. No hunting for “embed URLs”.

It fits every screen. Pick an aspect ratio — 16:9, 4:3, 1:1, 9:16, 21:9 or your own — and the iframe scales with the page instead of overflowing on mobile. Prefer exact dimensions? Fixed width and height still work.

Build once, embed everywhere. The ShortCode Generator gives every iframe you design its own shortcode like [b-iframe id="123"] — paste it into posts, widgets, Elementor or your theme, and edit the iframe in one place.

Fast and search-friendly. Iframes are rendered server-side: crawlers see them, no-JavaScript visitors see them, and your layout never shifts while loading. The editor even warns you when a site refuses to be embedded, before your visitors meet an empty box.

Features

• Responsive sizing: Keep an aspect ratio (16:9, 4:3, 1:1, 9:16, 21:9 or custom) so the iframe scales with the page, or set a fixed height.
• Smart URL conversion: Paste a normal YouTube, Vimeo, Dailymotion, Google Maps, Spotify, Loom or Figma page link — it is converted to the embeddable form automatically (YouTube uses the privacy-enhanced youtube-nocookie.com player).
• Server-side rendering: The iframe is real HTML — visible to search engines and visitors without JavaScript, with no layout shift.
• Embed check: The editor warns you when a site refuses to be embedded, before your visitors see an empty box.
• ShortCode Generator: Build reusable iframes in the block editor and place them anywhere with [b-iframe id=”123″].
• Title: Specify the title for the iframe.
• Loading Behavior: Configure the loading behavior.
• Full Screen: Activate Full Screen to enable the iframe in full-screen mode.
• Layout: Define the width and height for the iframe.
• Design: Apply borders and shadows to enhance the iframe’s visual appearance.

How to use

• Install and activate iFrame.
• Add the iFrame block in the editor and paste any URL — recognised links convert automatically.
• Pick a sizing mode (aspect ratio or fixed), style it, publish.

• Or open iFrame → Add New ShortCode to build a reusable iframe and paste its shortcode anywhere — even [iframe src="https://…" ratio="16:9"] works directly.

• For installation help click on Installation Tab.

Feedback

• Did you like this plugin? Dislike it? Do you have a feature request? Please share your feedback with us

Check out the Parent Plugin of this plugin-

B Blocks – A blocks collection and page building tool for Gutenberg.

Check out our other WordPress Plugins-

Html5 Video Player – Display videos as single and playlist in multiple skins.

PDF Poster – Display/Embed PDF files with different styles.

Html5 Audio Player – Listen audios with awesome visuals.

StreamCast – Customizable radio player with different skins.

3D Viewer – Embed 3D models and 3D products with interaction.

Advanced Post Block – Show posts and custom posts in different layouts.

ShortCode

Use the following ShortCode to Embed Iframe.

    [iframe src='https://bplugins.com' title='bPlugins Website' width='100%' height='800px' loading='auto' border_width='2px' border_style='solid' border_color='#146EF5' border_radius='8px']

External services

This plugin uses the Freemius SDK for optional usage tracking and update notifications. No data is sent unless you explicitly opt in on the consent screen shown after activation — choosing Skip keeps the plugin fully functional with no data shared. When you opt in, basic WordPress environment information and your email are sent to Freemius. Freemius terms: https://freemius.com/terms/ — privacy policy: https://freemius.com/privacy/

Source Code

The complete, un-minified source code for this plugin’s JavaScript and CSS is included in the src/ directory of the plugin, and is also available on GitHub:
iFrame on GitHub

Build instructions

The compiled files in build/ are generated from src/ using @wordpress/scripts (webpack). To build them yourself:

1. Install Node.js (18+) and npm.
2. From the plugin directory, run npm install to install the build dependencies (see package.json).
3. Run npm run build to compile src/ into the minified files in build/.
4. Run npm start instead for a development build with file watching.

The build tooling is configured in package.json and webpack.config.js. The full development setup, including the linting configuration, is available in the GitHub repository linked above.

Third-Party Libraries

This plugin bundles the following third-party JavaScript/PHP libraries.

bpl-tools

• Source / GitHub: https://github.com/bPlugins/bpl-tools
• License: GPL-2.0-or-later – https://www.gnu.org/licenses/gpl-2.0.html
• Purpose: Shared utility library providing admin dashboard components and common Gutenberg editor controls.
• External Services: The library may connect to bPlugins, WordPress.org, and Freemius services for product data and checkout functionality. See full details: https://github.com/bPlugins/bpl-tools#external-requests–why-they-are-made