How to Add Vimeo Video through Gutenberg in WordPress

Adding video is typically a simple process when using the WordPress interface. It is simply a matter of using the share code provided by your video source or downloading the video if it is to be hosted from the WordPress site. As of WordPress version 5.0, Gutenberg is integrated into the interface as the default editor. It provides blocks that you can use for specific types of media. In this case, we are looking at Vimeo. Here’s a quick description straight form the About Us page in Vimeo:

Vimeo was born in 2004, created by a group of filmmakers who wanted an easy and beautiful way to share videos with their friends. Word started to spread, and an insanely supportive community of creators began to blossom. Now Vimeo is home to more than 70,000,000 creators worldwide.

Quite simply, Vimeo is a video-sharing website that focuses on short films and movies sold through their on demand system. Follow the directions below to add a Vimeo video using blocks in Gutenberg for WordPress.

Obtaining your Vimeo Video link

Before you begin, make sure to first obtain the share link of the Vimeo video you wish to use.

1. Log in to your Vimeo account
2. Find the video you wish to use and open it
3. When the video is opened you will see a series of icons in the top right corner. Look for the icon that looks like a paper airplane and click on it
4. You will see a window pop up labeled Share this video
5. Copy the link at the top of the list and save it for when you can add it to your post or page in Gutenberg

Using the Vimeo Block in Gutenberg

1. Log in to your WordPress site as an Administrator
2. Click on Posts
3. Select a post to edit or add a new one
4. If you are adding a new post, then give your post a title to start. If you’re editing an existing one, then skip to the next step
5. Click on the circled plus sign where you will add the block. You can really add it anywhere and then use the arrows to move the block into another location if needed
6. You will see the Block menu appear. Scroll down to the bottom where you will see Embeds. Click on Embeds to see the options.
7. Click on the Vimeo block
8. When the Vimeo block is loaded you will see a field labeled “Enter URL to embed here…” Paste the Vimeo URL in this location
9. Click on Save Draft or Publish in order to save your changes

Your Vimeo video can now be posted using the Gutenberg block in WordPress. Note that there also controls on the block that allow you to align the video the left of the page, in the center, or to the right of the page. Check out our other articles on using Gutenberg in WordPress.