Responsive Lightbox Video From Button

[nakana_mehr]

I’ve followed the thread (https://theme.co/apex/forum/t/insert-video-lightbox-in-button/25064/10) to get a lightbox video playing from a button, but the lightbox isn’t responsive. I’ve attempted some adjustment but haven’t been able to pull it off as of yet. Thoughts?

Content in “Classic Raw Content”:
[button class=“videoLightbox” type=“flat” shape=“round” size=“large” href=“https://player.vimeo.com/video/269917443?autoplay=1” title=“Example”]See Video Testimonial[/button]

[lightbox selector=".videoLightbox" opacity=“0.875” prev_scale=“0.75” prev_opacity=“0.75” next_scale=“0.75” next_opacity=“0.75” orientation=“horizontal”]

Custom CSS on page:
.ilightbox-holder div.ilightbox-container {
width: 800px !important;
height: 600px !important;
}

.ilightbox-holder.light {
left: calc(50vw - 400px) !important;
top: calc(50vh - 300px) !important;
}

Thanks!

[Prasant]

Hello @nakana,

Thanks for asking.

You can display video in lightbox effect upon clicking a button element using shortcodes. However, my recommendation would be to use ConvertPlus addon as it will be much easier to setup the same effect. You can install ConvertPlus from X > Validation > Extension. Here is a video tutorial that you can take a look to get started.

To learn more, please take a look at following article.

ConvertPlus | Themeco Docs

Thanks.

[nakana_mehr]

Ok, I guess ConvertPLus modals is an option, we use ConvertPlus for lead capture forms. However, that means creating a large amount of modals instead of manipulating a few lines of code, which seams excessive. Is there no way to accomplish responsiveness by altering the CSS? I’m thinking maybe some media queries to adjust for screen size, but that may not be the best way to go.

[mldarshana]

Hi Nate,

If you have a more specific requirement, I would suggest you to contact a developer or service. Regretfully, custom development would be outside the scope of our support though it’s technically possible.

Thanks for understanding!