Format Video Light Box for mobile

Support
#1

My site is https://pacify.com

I currently have two vimeo videos on my site that open in lightboxes after clicking a button. I have the following code in a classic raw content element in cornerstone to achieve this:

[button class=“videoLightbox” type=“flat” shape=“pill” size=“large” style=“background:#6F59A5; border:#6F59A5; text-shadow:none” href="//player.vimeo.com/video/139599994?autoplay=1" title=“See Pacify in Action”][icon type=“play-circle”]See Pacify in Action[/button]

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

These are working great, but I have two additional questions on this feature:

Firstly, I can tap outside the lightbox to exit, but is there a way to add an X in the upper corner so there is a more obvious way to close the lightbox?

Secondly, these open in a full screen on mobile, so the width of the lightbox extends beyond the boundary of my phone screen. Is there a way to make this feature more mobile-friendly?

Thank you!

#2

Hi there,

Thanks for writing in.

There should be a close button there and should work on mobile. Would you mind providing the site’s URL that has this lightbox. I will need to check ti what’s missing.

Thanks!

#3

The site URL is https://pacify.com . It is the video that pops up from the purple button on the masthead photo that says “See Pacify in Action”.

On the desktop browser window the x is in the corner of the browser rather than the corner of the lightbox window, and I’m hoping to get it onto the same square as the video box.

This is what it looks like on mobile. You can see the play window is not formatted to the phone screen dimensions.

Thank you!

#4

Hi there,

Ah the close icon is there now, but positioning it within the video isn’t possible for the reason that video positioning changes in every device view. The close icon and fixed there so it doesn’t move in sync with lightbox main window. I can position it based on your requirement, but it will also base on my view and it will appear in a different position in your view. The close icon is positioned through CSS, while lightbox main window is through javascript.

As for the mobile view, please try removing this CSS first

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

That’s the cause of the issue in mobile.

Thanks!

#5

Understood on the close icon, thank you.

For the mobile view…that CSS is there to center the lightbox in the browser window. Removing that CSS resulted in the lightbox shifting to the left side of the screen, and it was still too large in the mobile view. Any other possibilities?

Thanks!

#6

Hi There,

In that case, let’s wrap the said CSS code with a @media query so it does not affect the mobile view (767px and below screen-width)

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

Hope it helps,
Cheers!

#7

Thank you.

I have wrapped all lightbox related code in @media, but that still only makes the light box left-oriented instead of center - it is still oversized beyond the screen dimensions on mobile

#8

Hi There,

The lightbox video respond on mobile screen on my end now.


Try to clear your browser’s cache.

Cheers!

#9

Awesome, it’s good on my end as well. Thank you as always for your help!

#10

You are welcome, I’m glad you got the lightbox in the way you wanted.

#11

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