Show a WordPress Video in a Lightbox with Advanced Gutenberg

Lightbox Gutenberg

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!


Step #1. Install the Advanced Gutenberg Plugin

First, let's install the Advanced Gutenberg plugin which has the features we need:

  • Click Plugins > Add New.
  • Type Advanced Gutenberg in the search box.
  • Click Install Now.
  • Click Activate.
200720 Adv Columns 001
200720 Adv Columns 001

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

Summary

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


Leave a Reply

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

Professional publishing plugins for WordPress! Get PublishPress