Lightbox with video youtube


In the image below you’ll see 2 images with the youtube play button. This is generated with the code below:

[image src="" link="true" href="//" lightbox_video="true"]

I have followed the instruction on this page:

The problem is; the url of the page will change to youtube and will open in full screen. Also I need to press the play button again.

What should happen is that there will be a lightbox pop up where the video will automatically play. The URL should not change. Also the video needs to be played not in fullscreen mode. Just a normal size video pop up.

The reason I’m using an image instead of the standard embed youtube code is because embed youtube code will slow down my website.

Hey @djinnie,

I tested the code and found that you missed to add the [lightbox] shortcode. The overall code should be:

[image src="" link="true" href="//" lightbox_video="true"][lightbox]

I’ve tested that and it works.

Hope that helps.

That works. Thanks.

And how can I make the video play automatically? Furthermore, because there are more than 1 videos on this page I don’t want to play all the videos at once when one clicks on 1 video. I tested this and the both videos started playing after I clicked 1 video. This is pretty annoying and is not my goal.

I think its because it opens the other video too when I click 1 video. You can see that in the image below. Why is this? Because there is no need to open both videos.

Hi There,

Thanks for writing in again!

The videos are working fine, playing one at a time. Please check the video.

Can you please confirm if you have still the issue.


It works now. Thanks!

Another question; can I also use this same technique / lightbox feature with, lets say, for example Libsyn (podcast player)?

Please see below the embed codes I have for this. Instead of embeding the Libsyn player I’d like to have a clickable image and when you click on the image the libsyn player comes up and starts playing.

Hi There,

Please try with the following shortcodes:

[image class="my-lightbox" src="" link="true" href="//" lightbox_video="true"][lightbox selector=".my-lightbox"]

I’ve added the selector to the shortcodes above the prevent the duplicated lightbox.

Please replace the // with your URL.

Hope it helps :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.