New Button Video Lightbox Issue

Good day everyone,

I’m trying to create a video button with a Lightbox function that will open a video that autoplays, pretty much the same way I did with the image using this short-code:

[x_image src=“https://www.itaquod.com/wp-content/uploads/2018/04/itaquod-video-player.jpg” link=“true” href=“https://www.youtube.com/embed/93vSbHzNKMY?autoplay=1” lightbox_video=“true” class=“lightbox-video”]
[x_lightbox selector=".lightbox-video"]

But I’m not quite sure if it’s possible to mimic the style of the new buttons that are in the X theme v2. (I couldn’t find the short-code for those buttons on the x website, it features only the old ones).
The Read more is a content modal button, that’s already a pre built option.
See Img:

Hello @mediacomponents,

Thanks for asking. :slight_smile:

You have the option to use V2 elements to mimic the style. Or if you want to style Read More button similar to V2 buttons then you can use following CSS under X > Theme Options > CSS:

.more-link {
    border-radius: 4.58em;
    background-color: rgba(255,255,255,1);
    box-shadow: 0em 0.15em 0.65em 0em rgba(0,0,0,0.25);
    font-size: 3em;
    padding: 0.575em 0.85em 0.575em 0.85em;
}

On the other hand you can use ConvertPlus plugin to open lightbox on click of a element. You can install ConvertPlus from X > Validation > Extensions. To get started, please take a look at following resource.

https://www.youtube.com/watch?v=53evC1A-4UE&list=PL1kzJGWGPrW_QHBqtIHKL9vBNGyq9sIh-&index=5

Thanks.

UPDATE: Alright, I seemed to have found a solution by adding btn-lightbox in the class name & youtube embed href link.
However, is there a way to have it non-full screen when the light-box opens?

This looks like something more complex that I thought of.
Please take a look at the following link https://www.itaquod.com/ (next under the slider, in the IQ FOR YOU section, next to 2 horizontal blocks… in the right column there’s an image. When clicked the light-box is opened and a video starts auto playing.)

It’s achieved using this tag:
[x_image src=“https://www.itaquod.com/wp-content/uploads/2018/04/itaquod-video-player.jpg” link=“true” href=“https://www.youtube.com/embed/93vSbHzNKMY?autoplay=1” lightbox_video=“true” class=“lightbox-video”]
[x_lightbox selector=".lightbox-video"]

Is it possible to add something like this to a V2 button? There are going to be several buttons on this page that will have different videos. https://www.itaquod.com/structured-crm-software-testground/

I’m not sure if there’s anything I can use from this page: https://theme.co/apex/forum/t/shortcodes-lightbox/165

Hi There @mediacomponents

It seems that you have managed it. Let us know if you need further assistance.

Thanks!

Evening, on the homepage is the one functioning properly, on the other link is what I asked about, because now it opens the video in full screen.

UPDATE:
btn-lightbox stoped functioning, not sure what went wrong.
But out of the blue if added this class to a buttion, and then link the button the video with an embed link [/embed/851sj0FVI3U?autoplay=1], it doesn’t open the video in a lightbox anymore.

Hi There,

V2 button has no control over the lightbox (especially video settings). You can use the Content Area Modal + Embed Video code instead. (it still has a bug though, it does not pause the video when the modal is closed.), the Content Area Modal Toggle has the same configuration as the button, so you can style it like your button.

If this does not work for you, you can fix the V2 button + lightbox issue with the following custom CSS.

.ilightbox-container iframe,
.ilightbox-container {
	max-width: 700px;
}
.ilightbox-holder {
  left:25% !important;
}

Thanks,

I used your CSS and it did well. The V2 button fixed both of those issues, but one bug appears:

Somehow other videos that were embedded in the buttons below are now showing in the same lighbox… I want to use autoplay “?autoplay=1” upon opening, but they would start playing at the same time… Is there a way to separate them? One button = One video

Hi There,

In this case, you have to use the separated lightbox shortcode for each button:

[x_lightbox selector=".lightbox-video-1"]
[x_lightbox selector=".lightbox-video-2"]

Hope it helps :slight_smile:

May I ask, where do you insert this short-code in a V2 type button?

Hi again,

You can add those shortcodes in the Classic Raw Content element anywhere in the same page where you have the button.

Hope this helps!

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