How to Create a Video Modal in GenerateBlocks

Embedding a YouTube video directly on your webpage can often throw off the balance of your layout — especially in key design sections like your homepage hero. Instead of trying to force a video to fit in visually, a better option is to display it in a popup modal.

In this tutorial, I’ll walk you through exactly how to use GenerateBlocks overlay panels to create a video modal that opens when you click a button — keeping your layout clean while still giving users access to rich video content.

Why Use a Modal Instead of an Embed?

Let’s say you have a hero section with a headline, a bit of intro text, and a “Watch Video” button. Normally, you might embed the video right in that section, but doing so can clutter the design and break visual flow — especially on mobile.

With the new overlay panel system in GenerateBlocks, you can keep the video out of sight until a user clicks, making for a cleaner, more intentional user experience.

Step 1: Create a New Overlay Panel

First, go to the WordPress dashboard and navigate to:

GenerateBlocks → Overlay Panels → Add New

Give your overlay panel a name like Video Modal.

Add the Video Embed

1. Insert a Container block.
2. Set the width to:
   • 600px on desktop
   • 300px on mobile (responsive setting)
3. Inside that container, add a YouTube Embed block and paste your video URL.

Step 2: Add a Close Button

To let users close the modal:

1. Insert a Button block above the video.
2. Use an SVG icon for the X (from Phosphor Icons or similar).
3. Set the button to display icon only.
4. Style the button:
   • No padding
   • Clear background
   • Dark gray icon color
   • 1.5em icon size
   • On hover: keep background clear, and maintain icon color

Position the Close Button

1. Wrap the button in a Container block.
2. Set layout to flex and align it to the end.
3. Under Advanced → Overlay Panel Trigger, set it to Close Opened Overlay Panel.

Step 3: Configure Overlay Panel Settings

With your panel still open, adjust these settings:

• Panel Type: Standard
• Trigger Type: Click
• Backdrop: Enabled
  • Blur: 5px
  • Backdrop Color: Darkened to around 65% opacity
• Position: Center
• Animation:
  • In: Fade in down
  • Out: Fade out up
  • Duration: 500ms

Go ahead and Publish your overlay panel.

Step 4: Set Up the Trigger Button

Now, go back to your page where the “Watch Video” button lives.

1. Select the button.
2. Go to Advanced → Overlay Panel Trigger and choose the Video Modal you just created.
3. Optional: change the button’s HTML tag to <button> so it behaves correctly (e.g. shows pointer cursor).
4. If a border appears (as GenerateBlocks adds one by default), zero it out under Borders.

Save the page and refresh.

Now when you click the button, your video modal should pop up — clean, centered, and with a close button in the top right.

Step 5: Final Styling Tweaks

You may notice some minor styling needs:

• If your overlay backdrop is dark, change the X icon to white for contrast.
• Darken the backdrop for better visual focus.
• Make sure the modal looks good on tablet and mobile in the Customizer preview.

Everything should now look clean and function well across devices.

Recap: Clean Video Embeds Without Layout Headaches

Using a modal like this keeps your layout free from awkward inline videos while still allowing visitors to watch your content. And with the GenerateBlocks overlay panel system, setting this up is quick and flexible.