Video Not Showing In Safari, But Only Does Show After A Bit Of Scrolling

I have a video that, while using Safari, is not responding the way it should. It does load because I can hear the sound of the video, but I can only see the video after I've scroll

Solution 1:

Just add width: 100% the the video element #video and you'll have it with tha same width as the body:

#video {
  width:100%;
}

$('#video-togglebutton').on('click', function() {
  var videoDiv = $('#videoDiv').toggle();

  if (videoDiv.is(':visible')) {
    $('#video').get(0).load();
    $('#video').get(0).play();
  } else {
    $('#video').get(0).pause();
  }
});

$(document).ready(function() {
  $('#video').on('ended', function() {
    $('#video').get(0).pause();
    $('#videoDiv').toggle();
  });
});

#videoDiv {
  width: 100%;
  height: 360px;
  position: relative;
}
#videoBlock,
#videoMessage {
  width: 100%;
  height: 360px;
  position: absolute;
  top: 0;
  left: 0;
}

#video {
  width:100%;
}

.videoClick {
  text-align: center
}
.videoClicka {
  color: white;
  background-color: rgba(241, 241, 241, 0.25);
  font-size: 1.7em;
  cursor: pointer;
  cursor: hand
}

video {
 background-image: url("{{ 'fotel-photography-loading-3.svg' | url_asset }}");
 background-repeat: no-repeat;
 background-size: 100px100px;
 background-position: center;
 margin-top:-34px;
 width:100%;           
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonid="video-togglebutton">Toggle video</button><divid="videoDiv"style="display:none"><divid="videoBlock"><videopreload="preload"id="video"><sourcesrc="https://static.webshopapp.com/shops/054833/files/093143183/fotel-photography-course-tour-workshop-video-4.mp4"type="video/mp4"></video></div></div>

Solution 2:

This works (bit of a hack):

/*makes window scroll down and up again one pixel, after page is loaded*/  
$(window).load(function(){
   $(window).scrollTop($(window).scrollTop()+1);
   $(window).scrollTop($(window).scrollTop()-1); 
}