Fall-back Image flashing before background Video plays

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!