Jump to content

How to fix video and image background displaying badly in mobile

Recommended Posts

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!

Screenshot 2021-07-27 at 23.28.48.png

Screenshot 2021-07-27 at 23.28.29.png

Link to comment
  • Replies 15
  • Created
  • Last Reply

Top Posters In This Topic

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.

Link to comment
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 🙂

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment
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.

 

Link to comment
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!

 

Link to comment
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

Link to comment

@otilia Add to Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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!

Link to comment
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 🙂

 

Link to comment

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?

IMG_5B087C6B7CFE-1.jpeg

Link to comment
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!

Link to comment
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?

IMG_5B087C6B7CFE-1.jpeg

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.

 

Screenshot 2021-08-10 at 20.43.57.png

Screenshot 2021-08-10 at 20.44.28.png

Link to comment
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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.