Show a WordPress Video in a Lightbox with Gutenberg and PublishPress Blocks
Inserting a YouTube or Vimeo video in your WordPress site is easier with Gutenberg than it was with the old Classic Editor.
Videos are always useful in a web site. They provide trust in your content, and with the right design approach, they also are an essential part of the user interface and user experience of your site.
This tutorial will explain to you how to insert a video in Gutenberg, and how to add some advanced features including a lightbox.
Keep reading to learn how! A quick note: this lightbox is also available for image gallery blocks.
Step #1. Install the PublishPress Blocks Plugin
First, let's install the PublishPress Blocks plugin which has the features we need:
- Click Plugins > Add New.
- Type PublishPress Blocks in the search box.
- Click Install Now.
- Click Activate.
Step #2. Create a Page
Let's add a page to showcase our videos:
- Click Pages > Add New.
- Write a proper title.
- Click the “+” symbol to add a block or type “/”.
- Search the Advanced video block.
- Copy a link from YouTube and paste it in the textbox.
- Click Fetch video.
You will see a preview. With the first two block options, you can either:
- Change the image preview.
- Remove the image preview at all.
You also have the default Gutenberg options available.
Step #3. Other Block Configuration Options
With the block still selected, take a look at the sidebar on the right. There, you have options to open the video on a lightbox, and for its background color and the color of the “play” button.
- Leave the lightbox options untouched.
- Change the color of the background and the button color and its style.
- Click Publish twice and click View Post.
The video will be displayed in a nice lightbox covering the whole width of the screen. The background of the screen behind the video will be dark:
- Repeat the process with a video from another provider (e.g. Vimeo)
You will have to repeat the same intuitive process again.
Summary
PublishPress Blocks provides a simple, yet practical block for embedding your videos from multiple providers or from your local server.