I’ve been asked to use a Video Poster Image (for mobile) that is square, but the slider is rectangular. The image appears cropped on mobile devices (the top and bottom are cut off.) Is there a way to ensure the entire image is displayed on mobile devices?
Hello @ask4fish,
Thanks for asking. 
You can try using CSS background position property. Also please take a look at following tutorial and see how it goes.
https://www.w3schools.com/cssref/pr_background-position.asp
If the problem is still there, please share website URL for us to take a closer look.
Thanks.
It worked to set the background-size to contain, sort of. It resized the image so that the full image is visible, but I would rather have the container resize to show the full width of the image. It appears some javascript is setting the container height.
Hi @ask4fish,
It’s the aspect ratio, and you should always match them. If the frame is rectangular then you should add a rectangular picture too. It’s not something that can be fixed by CSS without stretching them, you can fix it on certain view but not for all. Even Youtube videos automatically add black backgrounds when the video size doesn’t match the aspect ratio of the player.
The javascript based it on the aspect ratio of the grid, and any layers within follows it. So yes, even changing the height, the layers will stay the same since grid size is a setting that’s being followed. I recommend uploading a rectangle image and video too. Or make the grid size to square too
Thanks!
I’m just the developer - the designers have made the decision to have a rectangular video and a square mobile image. They’ll just have to live with a resized mobile image. Thanks for your help.
You are most welcome.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.