Jump to content

Fall-back Image flashing before background Video plays

Recommended Posts

Site URL: http://sociallydigitalmarketing.com

Hi everyone! I'm having a slight issue with my website in regards to the mobile fall-back image flashing quickly before the start of the background video. In order to fix this issue, I did some research and stumbled upon this code: 

<script 
 src="https://code.jquery.com/jquery-3.5.1.min.js"
 integrity="sha256-
  9/aliU8dgd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous"></script>
<script>
    var imgSRC = $('.custom-fallback-image').attr('src');
$('.custom-fallback-image').attr('src', 'https://commons.wikimedia.org/wiki/Category:solid_white_images#/media/File:Borad_blank_space.jpg');
  
$(document).ready(function () {
  $('.custom-fallback-image').attr('style', 'display: none');
  setTimeout(function () {
      $('.custom-fallback-image').attr('style', 'display: block');
  }, 4000);
});
</script>

 

Although it fixed the flashing issue, it then created a problem in which the fall-back image does not ever appear centered on mobile devices. I know this code is the cause of it because when I remove it the problem is fixed, however I'm not sure what alternatives there are or how to fix it. Obviously removing the code altogether would solve the alignment issue but then the flashing problem would reoccur. Does anybody have any advice? Thank you guys so much in advance!

Link to comment
  • Replies 0
  • Views 343
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

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