How to Open Video in a Lightbox by Clicking the Button in WordPress Gutenberg (without Plugin)

Do you realize that your WordPress videos get in the way of viewers staying on your content when clicked? For example, if you want to use your WordPress button as a trigger to open a video sourced from YouTube, your visitors will be forced to leave your content and redirect them to the YouTube site, either open in the same tab or in a new tab.

This can disrupt their flow and engagement. Wouldn’t keeping them on your page with a lightbox pop-up be better?

This article will guide you through creating a seamless lightbox experience for your videos, all within the Gutenberg editor. No plugins are required! Learn how to transform a simple button click into an engaging lightbox display for your videos, keeping viewers focused on your content.

Steps to Open Video in a Lightbox by Clicking the Button in WordPress Gutenberg (without Plugin)

Step 1: Add the Custom HTML Block

First, go to the WordPress Gutenberg editor by creating a new post type (page or post) or selecting the existing one. Afterward, add the Custom HTML block by clicking the plus (+) block inserter icon and typing “HTML.”.

Step 2: Add the Code to the Custom HTM L Block

Next, it’s time to add the code to the custom HTML block. This snippet contains HTML, CSS, and JavaScript code. Here’s the following example of code you can copy and paste into the available field:

<!-- Button to Open Video in Lightbox -->
<button class="open-video-lightbox" data-video-src="https://www.youtube.com/embed/INSERT_YOUR_VIDEO_ID">Play Video</button>

<!-- Lightbox Container -->
<div id="video-lightbox" class="video-lightbox" style="display:none;">
    <div class="video-lightbox-content">
        <iframe id="video-lightbox-iframe" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <span class="video-lightbox-close">&times;</span>
    </div>
</div>

<style>
/* Button Styles */
.open-video-lightbox {
    display: inline-block;
    color: black;
    padding: 10px 20px;
    background-color: #ffffff;
    font-size: 16px;
    border-style: solid;
    border-width: 2px;
    border-color: #0653cf;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
    text-decoration: none;
}
.open-video-lightbox:hover {
    background-color: #66ff00;
    color: #000000,
}

/* Lightbox Styles */
.video-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.video-lightbox-content {
    position: relative;
    width: 80%;
    max-width: 1000px;
    padding: 0;
}
.video-lightbox-content iframe {
    width: 100%;
    height: 500px;
    border: none;
    border-radius: 4px;
}
.video-lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    color: white;
    cursor: pointer;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const openVideoButtons = document.querySelectorAll('.open-video-lightbox');
    const lightbox = document.getElementById('video-lightbox');
    const lightboxIframe = document.getElementById('video-lightbox-iframe');
    const lightboxClose = document.querySelector('.video-lightbox-close');

    openVideoButtons.forEach(button => {
        button.addEventListener('click', function() {
            const videoSrc = this.getAttribute('data-video-src');
            lightboxIframe.src = videoSrc + '?autoplay=1';
            lightbox.style.display = 'flex';
        });
    });

    lightboxClose.addEventListener('click', function() {
        lightbox.style.display = 'none';
        lightboxIframe.src = '';
    });

    lightbox.addEventListener('click', function(e) {
        if (e.target === lightbox) {
            lightbox.style.display = 'none';
            lightboxIframe.src = '';
        }
    });
});
</script>

Step 3: Customize the Code Snippet

Replace INSERT_YOUR_VIDEO_ID with the Actual ID of Your YouTube Video

To make your button open the video sourced from YouTube in a lightbox, you must input the YouTube video ID into the snippet that you’ve just added to the Custom HTML block.

So, where can you get the YouTube video ID? The YouTube video ID is located in the URL of the video page, right after the v= URL parameter. For example, the URL of the video is https://www.youtube.com/watch?v=S1fEK3-QavY&t=1s. Therefore, the ID of the video is S1fEK3-QavY.

Adjust the Styles as Needed

Adjusting the styles to match your content design involves customizing the CSS properties so that the button and lightbox fit seamlessly with the overall design and aesthetics of your website.

There are two main elements available in the CSS snippet that you can adjust; the button and the lightbox. Here are the specific areas you might want to be concerned about:

• Button Styles
  • Color Scheme:
    • Background Color: Use a color that matches your overall design,
    • Text Color: For readability, please ensure that the text color contrasts well with the background color.
  • Font:
    • Font Family: We suggest you use the same font family as your theme for consistency.
    • Font Size: You can adjust the font size to your preference.
  • Padding and Margins:
    • You can adjust the padding to ensure the button looks balanced and fits well within your layout.
    • Use margins to space the button appropriately relative to other elements.
  • Border Radius:
    • Adjust the border radius to your liking.
  • Hover Effects:
    • Implementing hover effects makes users more likely to click the button.
• Lightbox Styles
  • Overlay Background:
    • Color and Opacity: Setting the color and opacity is crucial, it’s a differentiator between open video in a lightbox and the conventional way.
  • Lightbox Content:
    • Width and Height: Please ensure the video is neither too large nor too small.
    • Padding: Make sure there is enough padding so that the content does not touch the edges.
  • Close Button:
    • Positioning: Ensure the close button is easily accessible and does not overlap important content.
    • Size and Color: Adjust the size and color to make the close button visible.

The Bottom Line

Adding a video lightbox to your site using Gutenberg without the need for a plugin is a straightforward process that enhances the user experience and engagement.

By leveraging custom HTML, CSS, and JavaScript, you can create an elegant and interactive way for visitors to view your video content. This method not only keeps your site lightweight but also offers greater flexibility and customization.

Last but not least, please consider to the styles of your button and lightbox with the overall design, to ensure a cohesive and professional appearance, enhance the user experience, and maintain visual consistency.