How to fix video and image background displaying badly in mobile

Site URL: http://www.piscesaccounts.co.uk

Hello,

I have created a website for a client, there is a background video in the top banner of the home that displays nicely on desktop but on mobile is showing only partially. I tries with a fallback image but then the fish was showing super big when loading the page and then it goes into the video showing partially the fish, so there is really no substitution of the video for the image in mobile. I tried with a fallback gif and the same problem happened. 

This is also happening when I use an image as a background banner, in mobile version it shows only partially. Does someone know how to fix this issue? Would it be possible to have the image / video centered somehow in the mobile version?

Many thanks!

Hi. DId you remove video/image? I don't see both here.

When you say

12 hours ago, otilia said:

but on mobile is showing only partially.

Were you actually able to get the video to play at all in mobile? Visited your site (nice work, by the way) but it's not loading on a mobile device (iPhone, Chrome browser, latest everything).

This is a persistent and seemingly unsolved problem with Squarespace that they need to solve to compete with most other services that enable autoplay video backgrounds on mobile.

4 hours ago, jessepacker said:

Were you actually able to get the video to play at all in mobile?

The banner video above is playing fine for me on mobile 🙂

On 7/28/2021 at 8:01 AM, tuanphan said:

Hi. DId you remove video/image? I don't see both here.

Hello, I didn't. I left the video playing from vimeo, and removed the fallback image because it was showing super big when loading and then disappearing, so there was no point of keeping the fallback image.

On 7/28/2021 at 11:52 AM, jessepacker said:

When you say

Were you actually able to get the video to play at all in mobile? Visited your site (nice work, by the way) but it's not loading on a mobile device (iPhone, Chrome browser, latest everything).

This is a persistent and seemingly unsolved problem with Squarespace that they need to solve to compete with most other services that enable autoplay video backgrounds on mobile.

Hello, yes, the video is playing on mobile, but what we see is just the tail of the fish and a little but of the planet (it is a planet 🙂  So, the video is not centered. When talking with Squarespace they suggested to have a fallback image but that solution doesn't work because the video is actually loading so no fallback image is needed. The problem is that the video is showing only a part of it, and I was wondering if it is possible to center somehow the video, something like what Squarespace has for choosing the point on the image... Any ideas how to show the video centered? Many thanks!

On 7/28/2021 at 4:27 PM, paul2009 said:

The banner video above is playing fine for me on mobile 🙂

Hello and thanks. The video plays, but only shows a part of it, being the fish cut, I wanted to find a way to show the full fish, and not cut. Thank you

@otilia Add to Design > Custom CSS

/* eat fish */
@media screen and (max-width:767px) {
body.homepage .Parallax-item:first-child iframe {
    left: -400px !Important;
}
}

On 8/1/2021 at 12:21 AM, tuanphan said:

@otilia Add to Design > Custom CSS

/* eat fish */
@media screen and (max-width:767px) {
body.homepage .Parallax-item:first-child iframe {
    left: -400px !Important;
}
}

 

Hello and thanks!!! Will this code work only on mobile to center the image? I added it and nothing happened, not sure what happened. Thanks!

On 7/28/2021 at 11:52 AM, jessepacker said:

When you say

Were you actually able to get the video to play at all in mobile? Visited your site (nice work, by the way) but it's not loading on a mobile device (iPhone, Chrome browser, latest everything).

This is a persistent and seemingly unsolved problem with Squarespace that they need to solve to compete with most other services that enable autoplay video backgrounds on mobile.

Thank you, btw 🙂

So the fish video still does not play for me on mobile (Safari or Chrome iOS browsers. Plays fine in OSX Chrome on a desktop. 🤷🏻‍♂️

Curious to know if a solution was ever offered. We're having similar issues where a couple of sections are not orienting well to mobile. This is particularly true with our video in the top banner.

I'm wondering if the solution is to abandon the video or are visitors of mobile sites forgiving about the partial images and cut off vids?

Also, are there recommendations for image sizes?

On 8/4/2021 at 10:37 PM, jessepacker said:

So the fish video still does not play for me on mobile (Safari or Chrome iOS browsers. Plays fine in OSX Chrome on a desktop. 🤷🏻‍♂️

Ok, apparently it does play for my client, can you tell me what do you see instead of the video? Both of my client and me see the video, so I cannot see what is shows when not the video. On the other hand, the fallback image was messing with the loading, since it showed a massive fish that disappeared when the video started, so..not really a solution. My client complains that the Portrait position is showing the fish partially, therefore me opening this subject here, in case there is a way to "center" the video. The video shows good in landscape, but not sure if people will turn their mobiles. Many thanks!

On 8/9/2021 at 5:32 PM, decoding40 said:

Curious to know if a solution was ever offered. We're having similar issues where a couple of sections are not orienting well to mobile. This is particularly true with our video in the top banner.

I'm wondering if the solution is to abandon the video or are visitors of mobile sites forgiving about the partial images and cut off vids?

Also, are there recommendations for image sizes?

Hi! I see you have similar issues, I can see at least the text in your mobile is taking the whole space, in my case it is not and the text column is quite narrow, something that Squarespace said there is no solution.  Yes, the same with images, I see my images too small and the text very narrow, see attached. So, we are having similar issues, I hope someone out there can give us some hints.

7 hours ago, otilia said:

Ok, apparently it does play for my client, can you tell me what do you see instead of the video? Both of my client and me see the video, so I cannot see what is shows when not the video.

I'm having the same issue with a header video on a (7.1) site.  Your results @otilia are very similar to my own.  Here are my observations (for both your site and mine).

1. Video plays fine on any desktop/browser and Windows/iOS
2. Video plays OK on Android mobile (seems OK on all browsers?) - half the fish
3. I think your video may actually be centered - fish is aligned to the right in the video? Video
4. Video doesn't play at all on any iOS mobile (iPad and iPhone - portrait or landscape - yours or mine)
5. No fallback image is available on iOS mobile on your site (Safari & Chrome - portrait and landscape) - your header section where the video or fallback image should be is plain white (blank) background. Your header text and button are showing correctly.
6. I managed to get my fallback image working on iOS mobile (no video). Wasn't working at all (blank background like yours) and I kept fiddling then suddenly the fallback image appeared on iOS mobile?? Not sure why? One thing I noticed - make sure no default image is selected under the "Image" option toggle for the section background.  

My fallback image is not so much of a problem for me - but it would be really nice if Squarespace video headers would actually play on iOS mobile - like they do for other web frameworks.  I've tested other sites (Wordpress for example) that include video headers and they work just fine on iOS mobile (Safari and Chrome). 

I have quite a bit of custom code (javascript & CSS) added but I'm pretty sure that's not the issue? No conflicts/errors reported in Console.  I suspect it is just iOS and the method that Squarespace uses to load videos that is the problem? Pity I can't offer a solution at this stage but just letting you know my experience for what it's worth.

Appears to have solved the problem.  Video is now playing on iOS mobile