Embed Vimeo Video in Gutenberg
Step-by-step guide to embed Vimeo video in Gutenberg using the Custom iFrame WordPress plugin. No API key needed. No coding required.
Overview
Custom iFrame lets you embed Vimeo video in Gutenberg by pasting any Vimeo video URL into the block. No API key or Vimeo account required to display public 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 Vimeo Video in Elementor guide.
Requirements
- Custom iFrame plugin installed and active
- WordPress with the Gutenberg block editor
- A Vimeo video URL to embed
Step 1: Get the Vimeo Video URL
Open Vimeo
Go to vimeo.com and find the video you want to embed.
Copy the video link
Click the three-dot menu on the video. Click Copy link to copy the video 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.
Open your page in the block editor
Go to the page or post where you want the video. 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 Vimeo Video in Gutenberg
Paste the Vimeo URL
Select the Custom iFrame block. In the right panel, paste the Vimeo URL into the Source URL field. The video player appears inside the block in the editor.
Set height and publish
Set Height to 450px for a standard 16:9 Vimeo video, or enable Auto Height. Click Update or Publish.
Step 4: Configure Advanced Options (Pro)
The options below require Custom iFrame Pro (Starter, Studio, or Agency plan). View pricing — plans start at $29 one-time.
Autoplay: Start the video automatically when the page loads.
Mute: Silence the video by default. Required alongside Autoplay on most browsers.
Loop: Repeat the video continuously.
Color: Set a custom hex color for the Vimeo player controls to match your site theme.
Show Portrait / Title / Byline: Control whether the author avatar, video title, and creator name appear on the player.
Privacy Mode: Prevent Vimeo from tracking viewers via cookies.
Click Update or Publish. Your Vimeo video 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 Vimeo video in Gutenberg using the Custom iFrame plugin. From copying the video link to pasting the URL and publishing, the whole setup runs through the block editor without any code.
Troubleshooting
Video shows blank: The video may be set to private on Vimeo. Only public and unlisted videos can be embedded.
Video is cut off: Increase the height value or enable Auto Height.
Domain restriction error: Some Vimeo Pro accounts restrict embedding to specific domains. Check your Vimeo privacy settings.
For more help, see iFrame Not Showing.
FAQ
No. You can embed any public Vimeo video by pasting its URL. You only need a Vimeo account if you want to upload or manage the video itself.
The video is likely set to private or restricted to specific domains on Vimeo. Go to Vimeo privacy settings and confirm the video allows embedding.
Yes with Pro. Custom iFrame Pro includes Vimeo Advanced Controls for autoplay, loop, color, portrait, title, and byline settings. View pricing.
450px works well for most 16:9 Vimeo videos. Enable Auto Height to let the block calculate the correct size based on the video dimensions.
Also Available For
Embed Vimeo in Elementor
Guide for the Elementor widget.
Embed YouTube Video in Gutenberg
Embed YouTube with full Pro controls in Gutenberg.
Related Guides
Last updated today
Built with Documentation.AI