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.
200803 Adv Video 001
200803 Adv Video 001
  • 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.

Advanced Video
Advanced Video

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.
200803 Adv Video 007
200803 Adv Video 007
  • 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:

Lightbox Demo
Lightbox Demo
  • Repeat the process with a video from another provider (e.g. Vimeo)

You will have to repeat the same intuitive process again. 

200803 Adv Video 008
200803 Adv Video 008


PublishPress Blocks provides a simple, yet practical block for embedding your videos from multiple providers or from your local server. 

  • Jorge Montoya

    Jorge lived in Ecuador and Germany. Now he is back in his homeland of Colombia. He spends his time translating from English and German to Spanish. He loves to learn about open source technology.

    View all posts
  • Steve Burge

    Steve is the founder of PublishPress. He's been working with open source software for over 20 years. Originally from the UK, he now lives in Sarasota in the USA. This profile is generated by the PublishPress Authors plugin.

    View all posts

Leave a Reply

Your email address will not be published. Required fields are marked *