Show video in lightbox when clicking on an image

Hi WPMU DEV Team,
I would like to open a video in a lightbox when clicking on an Image. Is there an easy way to do this?

Regards,
Markus

  • Tyler Postle

    Hey Markus,

    Hope your day is going well so far!

    I would recommend using our Popup Pro plugin to help with this :slight_smile:

    It's got a javascript events add-on you can activate via:

    PopUp > Settings > Available Conditions.

    This will allow you to trigger a popup when a certain CSS element is clicked. Then you can have the video inside the PopUp.

    You will need to add the image using the code element so you can easily add in the custom CSS selector we will target. In my example I'm using #youranchor.

    Enter this into the code element Upfront field:

    <a href="#" id="your-id"><img src="http://yourdomain.com/yourimage.jpg"></a>

    Then for your PopUp, add that same id for the on-click conditional, as seen in my screenshot.

    Hope that helps! If you have any further questions on this just let us know :slight_smile:

    Cheers,
    Tyler

  • Markus

    Hi Tyler,

    Sorry for late reply but I had to solve first another issue to carry on.

    I set up the popup as described, unfortunately it is not working. It Looks like the code I put in the code element is not working. Could you have a look on it
    Have a look on the steps I did:
    1. PopUp > Settings > Available Conditions > JavaScript Events ==> activate
    2. Set up a POPUP and put in an ID under > Behavior > When to show the PopUp > Appear when user clicks on a CSS selector > activate this Option and put in "#mytestid"
    3. In Upfront I put the following code into a code element: <img src="http://pommern.immobilien/wp-content/uploads/2015/09/ICON_about-us_en.png">

    Regards,
    Markus

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.