How to create a Video Modal Popup in WordPress without Plugin

Your support helps keep this blog running! Secure payments via Paypal and Stripe.

Earlier, I wrote, “How to create a modal popup with a Free plugin”. With that article, you can create any type of content on the modal pop-up in the content area. However, if you create your own slider or use the slider plugin that does not support the modal feature. You need to implement the video modal popup script or download a free modal popup and add that script to WordPress yourself. In this post, I gonna share with you how I did the video modal without the plugin. Stay tuned!

Add HTML code and include the Script

In the first step, we will add the HTML code to functions.php in your child theme. Go ahead, open the functions.php and add the code below at the end of the last code.

// Video PopUp: modal HTML code
function harri_modalpopup_footer_function()
{

    if (!is_admin()) {
        echo '<div id="wb-form-popup-wrap"><div id="wb-form-popup-close">&times;</div><div id="wb-form-popup">
              <div class="pop-up-content">';
        echo   '<div class="container-fluid">';
        echo   '<div class="row">';

        echo   '<div class="wb-md-12">';
        echo    '<div id="modal_box_video_1"><iframe class="iframe_video" src="https://www.youtube.com/embed/_X0eYtY8T_U" frameborder="0" allowfullscreen></iframe></div>';
        echo   '</div>';

        echo   '</div>';
        echo   '</div>';
        echo  '</div></div></div>';
    }
}
add_action('wp_footer', 'harri_modalpopup_footer_function');

In the code above, we check if the current page is not the admin area, then we will add the HTML code to that page. The HTML code renders the modal box and the video embedded container which is an iframe. With iframe, you can add an external website, an external PDF file, and an embedded link.

For the action hook, we add the HTML code at the footer(wp_footer).

We want to include the JS and CSS files, which are the files we will create next. Again, we will add the scripts in functions.php as below.

// Video PopUp: js and css
function harri_modalpopup_js_footer()
{
    // enqueue css file
    wp_enqueue_style('harri-css-file', get_stylesheet_directory_uri() . '/css/modalSetup.css', array(), time(), false);


    // enqueue js file
    // get_stylesheet_directory_uri for child theme
    wp_enqueue_script('harri-js-file', get_stylesheet_directory_uri() . '/js/modalSetup.js', array('jquery'), '', true);
}
add_action('wp_enqueue_scripts', 'harri_modalpopup_js_footer');

Note that the handle (first parameter) must be unique. Check wp_enqueue_style and wp_enqueue_scripts for more information.

Add External CSS file

The second step, create a CSS folder under your child theme. And create a new modalSetup.css file in the CSS folder. Then add the code below to modalSetup.css.

/* Modal PopUps */
#wb-form-popup-wrap {
    background: rgba(0,0,0,0.8);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999999;
    color: #fff;
    -webkit-box-align:center;
    -webkit-box-pack:center;
    display: none;
}

#wb-form-popup {
    background: rgba(0,0,0,0.0);
    position: relative;
}

#wb-form-popup-close {
    position: absolute;
    top: 30px;
    right: 30px;
    cursor: pointer;
    font-size: 38px;
}

#modal_box_video_1
{
    display: none;
}

#wb-form-popup,
.iframe_video {
    width: 800px;
    height: 450px;
}

/* mobile */
@media(max-width: 700px) {
    #wb-form-popup {
        width: 300px;
        height: auto;       
    }

    .iframe_video {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }
}

Add External JS file

Finally, we create the JS folder under your child theme. Then add modalSetup.js under the JS folder. Next, you add the code below to modalSetup.js.

jQuery(document).ready(function ($) {   
   
    // -- trigger a video modal
    $('.video-modal-1 img').click(function () {
        $('#wb-form-popup-wrap').css('display', '-webkit-box');
        $('#modal_box_video_1').css('display', '-webkit-box');
    });

    // close the modal
    $('#wb-form-popup-close').click(function () {
        $('#wb-form-popup-wrap').hide();

        // Close video
        var url = $('.iframe_video').attr('src');
        $('.iframe_video').attr('src', '');
        $('.iframe_video').attr('src', url);
    });
});

The “video-modal-1” class is a class that you give to the button or link, or image to trigger the modal.

<button class="video-modal-1">Watch Youtube</button>
<a href='#' class="video-modal-1">Watch Youtube</a>
<img src="image.jpg" class="video-modal-1" />

Test the Result with Our Slider

Below is a Smart Slider 3 plugin( the plugin is easy to use ). You can install and activate it. Then create a simple slider and add the YouTube button to the slider. At the bottom, add the “video-modal-1” class so that when you click on the YouTube button, the modal will be triggered.

Now, if I click on the YouTube button with the “video-modal-1” class, it will show the modal with the YouTube link I added in the HTML code.

With the help of jQuery and CSS, you will get a simple modal pop-up. You can change it to show any kind of content you like, but you may need to edit the CSS to meet your needs. By the way, the video modal popup works for all devices. And that’s it for today.

Download Full Source Code

This is a video modal popup file including CSS, JS, image, and index files. You can run on any browser without the web server. In this download file, I edited the code so it will show two YouTube buttons and two modals. So you can see the code and adjust the code to meet your needs.

To adjust the code, you need beginner JS and CSS skills.

Your support helps keep this blog running! Secure payments via Paypal and Stripe.