Iframe

<iframe>Embeds external content like videos, maps, or forms.

This page shows you how to embed external content like videos and other websites using the Unblock Iframe block.

What it does

The Iframe block lets you embed content from another source directly into your page. Videos, interactive maps, external tools, calendars, forms — anything that provides an embed URL works here.

The block creates a standard <iframe> element with a data-unbk-iframe attribute so Unblock can manage it.

When to use

• Videos — YouTube, Vimeo, self-hosted
• External content — Other websites, apps, tools
• Widgets — Calendars, forms, social feeds

Key attributes

Attribute	Purpose	Example
src	Content URL	https://www.youtube-nocookie.com/embed/...
width	Frame width	560
height	Frame height	315
title	Accessible title	Product demo video
allow	Permissions	autoplay; fullscreen
loading	Loading behavior	lazy

Common mistake

When embedding YouTube videos, use youtube-nocookie.com instead of youtube.com. The regular YouTube domain sets tracking cookies on your visitors. The privacy-enhanced mode (youtube-nocookie.com) avoids this and helps you stay compliant with privacy regulations like GDPR.

Video embeds

YouTube (privacy-enhanced)

<iframe
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  title="Video title"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

Vimeo

<iframe
  src="https://player.vimeo.com/video/VIDEO_ID"
  title="Video title"
  allow="autoplay; fullscreen; picture-in-picture"
  allowfullscreen>
</iframe>

Allowed sources

For users without the unfiltered_html capability, iframe src is restricted to:

• WordPress oEmbed providers — YouTube, Vimeo, Spotify, Twitter, and other registered providers
• Google Maps — google.com/maps/embed

Users with unfiltered_html (typically Administrator) have no restrictions.

To allow additional sources, use the unblock/html/allowed_iframe_sources PHP filter.

Best practices

• Use youtube-nocookie.com for privacy-enhanced YouTube embeds
• Set appropriate allow permissions — only grant what the embed actually needs
• Add loading="lazy" for iframes below the fold to improve page load speed
• Always include a title attribute so screen readers can describe the embedded content

HTML output

<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" data-unbk-iframe></iframe>

Why data-unbk-*?

Unblock uses data-* attributes (not classes) as structural identifiers, so they never collide with your CSS or your theme's. Learn how to target them →

Preset styles

The data-unbk-iframe attribute applies the following default CSS:

[data-unbk-iframe] {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border: none;
}

You can override these defaults with your own selectors.

Next steps

• Image — For static images
• SVG — For inline vector graphics