How to create a Video Modal Popup in WordPress without Plugin
Home » BLOG » WordPress » How to create a Video Modal Popup in WordPress without Plugin

How to create a Video Modal Popup in WordPress without Plugin

category:  Web development, WordPress

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

Add HTML code and include script

First step, we will add the HTML code into functions.php in your child theme. Go ahead, open the functions.php and add the code below at the end of 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 on that page. The HTML code renders the modal box and the video embedded container which is iframe. With iframe, you can add the external website, external PDF file and the embedded link.

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

We want to include the js and css file 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

Second step, create a CSS folder under your child theme. And create new modalSetup.css file in CSS folder. Then add the code below into 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 JS folder. Next you add the code below into 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, it 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 in the slider. At the button, add “video-modal-1” class so when you click on the Youtube button, the modal will be triggered.

Video Modal Popup
Youtube button will trigger the modal

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

Video modal popup with Youtube embedded link
Video modal popup with Youtube embedded link

With help of jQuery and CSS, you will get a simple modal popup. You can change 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.

elementor_logo

No coding skill, No design skill – Anyone can create a Beautiful Website. Elementor Pro comes with TON of FEATURES to help you finish your work FAST and FUN. Go get yours NOW! Elementor Pro >>

Download a video modal popup file – Pure JS

Video Modal Popup (59 downloads)

This is a video modal popup file including css, js, image and index file. You can run on any browser without webserver. In this download file, I edit the code so it will show 2 Youtube buttons and 2 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 skill.