Hi, I haven’t had a huge play with the Sitely 7 update but I have looked at my own site in it which is currently being worked on in dribs and drabs. One thing that’s immediately changed is how the site looks in preview. Prior to the update, I’d made a video background with Fixed Position ticked and the background looked exactly as intended in preview mode. (This is just on the home page only)
Now we have buttons to show how it looks on different devices, the background only works in Ultra Wide view , then gets progressively clipped as you cycle through the other previews. My logo is part of the video, so it get clipped drastically by the time you’re looking at it in mobile phone preview.
Is it possible to tailor the way the background displays for each scale?
I’m concerned that if I have to make the logo fit mobiles as a default, then I’m going to end up with a very tiny logo in view when you look at the site from a desktop or ultra wide screen.
Thanks
PS: I should probably add that I’ve tried unticking fixed position and the ‘per device’ scaling issue remains.
The new preview setup attempts to be more faithful to how each device layout would work. Have you tried comparing it with, say, Safari’s responsive design mode? Maybe that’s how it was all along.
About how to fix it, a full size background has the fundamental issue of window aspect ratio vs. video aspect ratio. If you want all the background to be covered, and the video aspect ratio is naturally fixed, there’s no way to ensure the window aspect ratio always matches (that’s up to the browser user). So clipping is inevitable.
What Sitely doesn’t do is proportionally scale an element’s height, so as to preserve its aspect ratio, and the whole video would always be visible. This is something that’s desirable and we should add, but it would then not ensure that the video covers the whole window, so it would stil not be a fix for your case.
I would tend to not use the background video element in your use case. Instead, I would create three different videos each of which is better suited to each device. With smartphone and tablet devices you can simply use a standard video element because browser windows size doesn’t come into the equation. This will also allow you to select parts of the video that are important so that the central focus of the video remains within the viewport. Your logo can then be overlaid onto the video component at any size you wish, rather than have it embedded within the video itself. By carefully using the “display on this device” option in Sitely, you can choose which video displays on each device.
Thanks for taking the time to explain this, Duncan. Having read Stephie’s suggestion below, I might have a go at decoupling the logo from the video and reintroducing it as a layer. Were it not for the logo clipping, the various previews would just about be acceptable.