Border Issue on Mobile Devices

[Ryan Landels]

Hello! I’m running into an issue with the plugin on mobile devices. I have the border set to 1 on for the desktop version of my site and it looks great:

Home

On mobile devices, however, it adds very awkward white padding – pics below. Is there any way to change this so the 1 pixel border is uniform across desktop and mobile? Would appreciate any tips!

 

[RavanH]

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;
if(window.innerWidth/pixelRatio 

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.

[Author]

Posts