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

Stop Mobile Fallback Image From Showing on Desktop

Question

Site URL: https://menuez.com/

I have a cover page with an auto-play video background for desktop that is replaced with a fallback image on mobile. The mobile fallback image flashes on screen before the video starts playing on desktop. Is there any way to disable the fallback image from showing on desktop or replace it with a background color while retaining image on mobile?

Share this post


Link to post

12 answers to this question

Recommended Posts

  • 0
Posted (edited)

So my thoughts are that the code is running before the fallback image is actually generated, so lets try this.....

We can also get rid of the blank image, I should have thought of that earlier.

Replace the old code that I gave you with this, keep the script tags, keep the jquery script, just replace whats in yellow.......

$(document).ready(function () {
  $('.custom-fallback-image').attr('style', 'display: none');
  setTimeout(function () {
      $('.custom-fallback-image').attr('style', 'display: block');
  }, 4000);
});

 

image.png

Edited by rwp

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
  • 0
Posted (edited)

This jQuery code will change the image to blank.gif for 4 seconds and then change it back to your image.  You can adjust the time if needed, but it seem like the video loads in that amount of time.

If you don't want to upload a blank image, it looks like this is free to use. https://en.wikipedia.org/wiki/File:Clear.gif but confirm for yourself on the usage stuff.

var imgSRC = $('.custom-fallback-image').attr('src');
$('.custom-fallback-image').attr('src', 'blank.gif');

$(document).ready(function () {
  setTimeout(function () {
      $('.custom-fallback-image').attr('src', imgSRC);
  }, 4000);
});

 

Edited by rwp

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
  • 0

So I can't seem to get it to work. I have the latest jQuery Core in the site-wide code injection footer & your code injected between <script></script> tags on the page itself but I'm still seeing the mobile fallback flash before the video starts. Am I doing something wrong? Thank You!

On 6/24/2020 at 5:46 PM, rwp said:

var imgSRC = $('.custom-fallback-image').attr('src'); $('.custom-fallback-image').attr('src', 'blank.gif'); $(document).ready(function () { setTimeout(function () { $('.custom-fallback-image').attr('src', imgSRC); }, 4000); });

Share this post


Link to post
  • 0

Can you post a screen shot of the code injection areas?


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
  • 0

Try putting the jQuery code above the code in the header injection block.


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
  • 0

Hm... Can't get it to work... tried injecting jQuery in site-wide header & footer, as well as page header both with it's own <script> tags & without as in attached screenshot.

Screenshot (369).png

Share this post


Link to post
  • 0
Posted (edited)

Your script tag is incorrect for the jquery file.

You also need to replace blank.gif with a url to a blank image.

image.png.cf08fe2dfae49342f424f213f5d8b222.png

 

Edited by rwp

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
  • 0
Posted (edited)

Ya, I noticed after I posted; had it right the first time! Pointing to a wikimedia commons blank .jpg now but still nothing... 

 

Screenshot (399).png

Edited by DevonLois

Share this post


Link to post
  • 0

jQuery url is incorrect.  Needs to be https://

Use the link in my signature to generate a new script block and replace.


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
  • 0

Indeed; looks like that 's' was missing; rest of the code is the same for Core 3.5.1. I'm using minified version; tried uncompressed & slim as well - still nothing!

Share this post


Link to post
  • 0

Amazing! Thank you thank you thank you for helping with this odd issue - now we see a bit of grey before the video instead of the mobile fallback flashing for half a second. Awesome.

 

Quote

$(document).ready(function () {
  $('.custom-fallback-image').attr('style', 'display: none');
  setTimeout(function () {
      $('.custom-fallback-image').attr('style', 'display: block');
  }, 4000);
});

 

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...