Embed YouTube Shorts in Gutenberg

Step-by-step guide to embed YouTube Shorts in Gutenberg using the Custom iFrame WordPress plugin. Vertical video, no coding required.

Overview

Custom iFrame lets you embed YouTube Shorts in Gutenberg by pasting any Shorts URL into the block. Shorts use a vertical 9:16 format, so height settings matter more than with standard videos.

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 YouTube Shorts in Elementor guide.

Requirements

Custom iFrame plugin installed and active
WordPress with the Gutenberg block editor
A YouTube Shorts URL to embed

Step 1: Get the YouTube Shorts URL

Open YouTube and find the Short

Go to youtube.com and find the Short you want to embed. Shorts URLs follow the format youtube.com/shorts/VIDEO_ID.

Copy the share link

Click the Share button on the Short. Click Copy Link to copy the URL.

Step 2: Install the Plugin and Add the Block

Install and activate the plugin

Go to your WordPress dashboard. Go to Plugins > Add New. Search for Custom iFrame by Coderz Studio, click Install Now, then click Activate.

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

Open your page in the block editor

Go to the page or post where you want the Short. 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 YouTube Shorts in Gutenberg

Select YouTube as the source type

Select the Custom iFrame block. In the right panel, find Source Type and select YouTube.

Paste the Shorts URL

Paste the copied URL into the Source URL field. The Short appears inside the block in the editor.

Set the height for vertical format

Shorts are vertical (9:16 ratio). Set Height to at least 560px for a standard width, or enable Auto Height to let the block resize automatically.

Publish

Click Update or Publish. Your YouTube Short is live on the page.

Auto Height works well for Shorts since the vertical format varies by screen width. Enable it in the block settings panel to avoid cropping.

Click Update or Publish. Your YouTube Short 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 YouTube Shorts in Gutenberg using the Custom iFrame plugin. From copying the Shorts link to setting the vertical height and publishing, the whole setup runs through the block editor without any code.

Troubleshooting

Short appears cropped: Increase the height or enable Auto Height. Shorts need more vertical space than standard videos.

Short does not load: Confirm the Shorts URL is public. Copy the link directly from the Share button rather than from the browser address bar.

For more help, see iFrame Not Showing.

FAQ

Shorts are 9:16 vertical video. At a block width of 315px, set height to 560px. Enable Auto Height to let the block calculate the correct size automatically.

No. Basic Shorts embedding works with the free version. Pro adds autoplay, loop, captions, playback controls, and advanced YouTube API support.

Yes. Both the Shorts URL (youtube.com/shorts/ID) and the standard watch URL (youtube.com/watch?v=ID) work in the Source URL field.

Yes with Pro. The same YouTube Basic Options available for regular videos (Autoplay, Mute, Loop, Privacy Mode) work for Shorts too. See the Embed YouTube Video in Gutenberg guide for full Pro option details.

Also Available For

Embed YouTube Shorts in Elementor

Guide for the Elementor widget.

Embed YouTube Video in Gutenberg

Full YouTube embed guide with all Pro options.

Was this page helpful?

Last updated today

Built with Documentation.AI