Embed PDF in Gutenberg

Step-by-step guide to embed PDF in Gutenberg using the Custom iFrame WordPress plugin. Display documents without forcing downloads. No coding required.

Overview

Custom iFrame lets you embed PDF in Gutenberg by uploading a file or pasting a PDF URL into the block. Display brochures, reports, and manuals directly on your WordPress page without forcing users to download them.

Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.

Using Elementor instead? Follow the Embed PDF in Elementor guide.

Requirements

Custom iFrame plugin installed and active
WordPress with the Gutenberg block editor
A PDF file or PDF URL to embed

Step 1: Install and Activate Custom iFrame

Go to Plugins in your WordPress dashboard

Go to Plugins > Add New.

Install Custom iFrame

Search for Custom iFrame by Coderz Studio. Click Install Now, then Activate.

WordPress Add New Plugin screen showing Custom iFrame by Coderz Studio in search results with Install Now button

Step 2: Add the Custom iFrame Block

Open your page in the block editor

Go to the page or post where you want the PDF. Click Edit to open the Gutenberg block editor.

Add the Custom iFrame block

Click the Add Block button. Search for Custom iFrame. Click the block to add it to the page.

Step 3: Embed PDF in Gutenberg

Set Source Type to PDF

Select the Custom iFrame block. In the right panel, set Source Type to PDF.

Choose your source

Choose File to upload a PDF from your WordPress media library (recommended for toolbar customization), or choose URL to paste a direct PDF link.

Set the height

Set Height to fit your layout. Values between 600px and 900px work well for most documents.

Step 4: Configure Display Options

In the right panel, adjust how the PDF appears on your page:

Theme: Choose System Default, Light, Dark, or Custom (with a color picker).

Zoom: Set a preset zoom level or enter a value between 50% and 400%.

Default Scrolling: Choose Vertical, Horizontal, Wrapped, or Page-by-page.

Default Spreads: Set No Spreads, Odd, or Even for booklet-style documents.

Default Selection Tool: Choose Text Tool for highlighting and copying, or Hand Tool for click-and-drag scrolling.

Toggle individual toolbar tools on or off in the right panel:

Toolbar Position: Set to Top or Bottom.

Available tools: Print, Download, Presentation Mode, Copy Text, Add Text, Draw, Add Image, Rotate, Properties.

Toolbar customization is only available when Source Type is set to File. URL embeds do not support toolbar controls.

Step 6: Enable Lazy Load

In the block settings, find Smart Load and enable Lazy Load. The PDF loads only when a visitor scrolls to it, improving page speed.

Click Update or Publish. Your PDF is now live on your WordPress site.

For all block settings, see the Set Up Custom iFrame in Gutenberg guide.

This guide showed you how to embed PDF in Gutenberg using the Custom iFrame plugin. From uploading the PDF to configuring display options and publishing, the whole setup runs through the block editor without any code.

FAQ

File loads the PDF from your WordPress media library and unlocks toolbar customization (theme, zoom, tools). URL embeds a PDF from an external link but does not support toolbar controls.

Toolbar customization only works when Source Type is set to File. Switch from URL to File if you need toolbar control.

Enable Lazy Load in the Smart Load section. The PDF loads only when a visitor scrolls to it, reducing initial page load time.

Confirm the PDF file is publicly accessible. PDFs behind authentication or on servers with restrictive CORS headers may not load. See iFrame Not Showing for more help.

Also Available For

Embed PDF in Elementor

Guide for the Elementor widget.

Embed Google Docs in Gutenberg

Embed Google Docs in the block editor.

Was this page helpful?

Last updated today

Built with Documentation.AI