Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
SheriM

Video/Image banner loading slow - is there a fix?

Recommended Posts

Hi guys, on my site grow-wild.co, I have a home page banner video linked via YouTube - it takes anything from 3-7 seconds to load. I uploaded a fallback image (a still from the video) to display in the hope that it would load very quickly and make the user experience better. But the image takes a minimum of 3 seconds to load and in the mean time the user sees a black background. This obviously isn't ideal! 

I have spoken to SS support and they can't offer me a work around - there is no way to change the black background colour without overlaying a colour ontop of the video/image. 

The image size is just 150kb. 

Does anyone have any suggestions? Have you found a work around for this? 

Thanks! 

Share this post


Link to post

This plugin should help - https://www.squarewebsites.org/products/background-videos-utils

I used it on a client site recently and it works perfectly. 

NB. I didn't write this plugin and I am not affiliated with the author. 

 


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
On 10/8/2019 at 10:00 AM, SheriM said:

Hi guys, on my site grow-wild.co, I have a home page banner video linked via YouTube - it takes anything from 3-7 seconds to load. I uploaded a fallback image (a still from the video) to display in the hope that it would load very quickly and make the user experience better. But the image takes a minimum of 3 seconds to load and in the mean time the user sees a black background. This obviously isn't ideal! 

I have spoken to SS support and they can't offer me a work around - there is no way to change the black background colour without overlaying a colour ontop of the video/image. 

The image size is just 150kb. 

Does anyone have any suggestions? Have you found a work around for this? 

Thanks! 

Hi there, did you find a solution for this? thanks!

Share this post


Link to post

I'm having this question too. Kind of. The cover page video is apparently too slow loading on some desktop versions - and pulls the mobile image.  But on my phone (iPhone 6S) it sometimes display the video ... I assumed it would pull the mobile fallback image here (but that might depend on connection speed?).

Share this post


Link to post
On 10/8/2019 at 7:17 AM, colin.irwin said:

This plugin should help - https://www.squarewebsites.org/products/background-videos-utils

I used it on a client site recently and it works perfectly. 

NB. I didn't write this plugin and I am not affiliated with the author. 

 

I'm having this issue with my video homage banner. It takes 4 seconds on first load with a black screen.

Colin, do you have an example of the plugin working on a website?

The plugin website mentions this "...It uses built-in Squarespace code to load videos, so the functionality may vary with Squarespace changes."

Wondering if you have any example to share before taking a chance and throwing away $35 if it's not going to work.

Also looking at pre-loading pages but so far no luck. If anyone has recommendations on pre-loader plugins etc would be great. I'm using the Bedford template.

 

Share this post


Link to post

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...