Stop Mobile Fallback Image From Showing on Desktop

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?

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);
});

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); });

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

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

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.

Your script tag is incorrect for the jquery file.

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

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

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

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

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!

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);
});

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);
});

Can you guys copy and past the whole code need to make this work.

I take it this goes in the 'Page > Settings > Advanced' as opposed to 'Design > Custom CSS' right?

Using the latest Squrespace templates 7.1?

On 10/8/2020 at 8:04 PM, joelygoe said:

Can you guys copy and past the whole code need to make this work.

I take it this goes in the 'Page > Settings > Advanced' as opposed to 'Design > Custom CSS' right?

Using the latest Squrespace templates 7.1?

Have you solved this yet?

No.  I need the whole code thread and where to put it.  I am no good at coding.

23 hours ago, joelygoe said:

No.  I need the whole code thread and where to put it.  I am no good at coding.

Paste above code to Page Settings > Advanced > Header if it doesn't work, you can share site url, we can check easier.

I have tried pasting the below code into the "Page Settings > Advanced > Code" but it doesn't work.  Just leaves code in the header visible on the page.

https://www.nintaidojo.co.uk/history

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

23 hours ago, joelygoe said:

I have tried pasting the below code into the "Page Settings > Advanced > Code" but it doesn't work.  Just leaves code in the header visible on the page.

 

https://www.nintaidojo.co.uk/history

 

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

wrap code in script tag

<script>

your code

</script>

It still doesn't work unfortunately.

Okay - I have (hand typed) all this code into it.  Still doesn't work!

<script> 
 src="https://code.jquery.com/jquery-3.5.1.min.js" 
 integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"> 

</script> 

<script> 
var imgSRC = $('.cussom-fallback-image').attr('src'); 
$('.custcm-fallback-image') .attr('src',
'https://commons.wikimedia.org/wiki/Category:Solid_white_images#/media/File:Broad_blank_space.jpg'); 

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

<script> 
 src="https://code.jquery.com/jquery-3.5.1.min.js" 
 integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"> 

</script> 

<script> 
var imgSRC = $('.cussom-fallback-image').attr('src'); 
$('.custcm-fallback-image') .attr('src',
'https://commons.wikimedia.org/wiki/Category:Solid_white_images#/media/File:Broad_blank_space.jpg'); 

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

On 10/15/2020 at 3:53 AM, joelygoe said:

<script> 
 src="https://code.jquery.com/jquery-3.5.1.min.js" 
 integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"> 

</script> 

<script> 
var imgSRC = $('.cussom-fallback-image').attr('src'); 
$('.custcm-fallback-image') .attr('src',
'https://commons.wikimedia.org/wiki/Category:Solid_white_images#/media/File:Broad_blank_space.jpg'); 

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

Were you able to solve this? I am trying to solve the same thing as you above and none of the code works for me.

Not solved

Add to History Page Header

<style>
  @media screen and (min-width:992px) {
  #page section:first-child img {
    visibility: hidden;
}
  }
</style>