Reply To: Border Issue on Mobile Devices

Your Account / Forums / Easy FancyBox Pro / Border Issue on Mobile Devices / Reply To: Border Issue on Mobile Devices

April 3, 2018 at 2:55 am #11949

Hi Ryan, the problem here is not the border but the aspect ratio of the light box frame when rendered on a small screen. While on a large screen the frame wraps around the video nicely because the dimentions set on Settings > Media match those that are recommended by the video platform (normally), these dimensions will get ignored when they exceed a small screen device size.

In your screen prints, the device is smaller than the intended width of the video frame. The frame will be reduced in width to fit the view port but the height is not adapted to keep the original aspect ratio. But because the video itself will keep the original aspect ratio and reduce its height, you will now get to see the light box frame background above and below the video as it does not fit nicely around the video anymore…

We are currently working on a way to make the light box keep video aspect ratio (as it does with images) but that will not solve the remaining problem: the video renders very small on an already small screen. For this problem there is no other solution than to disable the light box effect for small screens.

This can be done by adding the following code in an HTML widget:

var pixelRatio = window.devicePixelRatio || 1;

In this example, the minimum screen width is set to 682 pixels. If you set your video width to 640 px, your border to 1 px and your frame margin to 20 px (minimum possible) then anything below 682 px will force the light box to another aspect ratio than the video.