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

Stop Mobile Fallback Image From Showing on Desktop


DevonLois
Go to solution Solved by rwp,

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?

Link to post
  • Answers 21
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Your script tag is incorrect for the jquery file. You also need to replace blank.gif with a url to a blank image.  

jQuery url is incorrect.  Needs to be https:// Use the link in my signature to generate a new script block and replace.

Posted Images

21 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

Link to post
  • 0

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

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

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

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

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

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

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

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!

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

 

Link to post
  • 0

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?

Link to post
  • 0
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?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
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.

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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);
});
Link to post
  • 0
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>

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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>

Edited by joelygoe
Link to post
  • 0
<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>

 

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