Having issues with a video not displaying correctly in Safari? The problem is that the video only becomes visible after scrolling the browser window. Want to see an example of this issue in action? Click here and select the red bag.
Check out the code snippet I used below:
$('#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 {
display:none;
left: 50%;
transform: translate(-50%, 0);
height: 35vw;
position: relative;
text-align:center;
}
#videoBlock{
width:60vw;
height: 35vw;
position: absolute;
top: 0;
left: 0;
left: 50%;
transform: translate(-50%, 0);
}
.videoClick {
text-align: center;
}
.videoClick a {
color: white;
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: 100px 100px;
background-position: center;
margin-top:-34px;
width:100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="video-togglebutton">Toggle video</button>
<div id="videoDiv" style="display:none">
<div id="videoBlock">
<video preload="preload" id="video">
<source src="https://static.webshopapp.com/shops/054833/files/093143183/fotel-photography-course-tour-workshop-video-4.mp4" type="video/mp4">
</video>
</div>
</div>Tried adding some extra code as a workaround by checking the video's ready state, but it didn't do the trick. Here's the additional code I tried:
if(video.readyState == 4){
$(window).scrollTop($(window).scrollTop()+1);
$(window).scrollTop($(window).scrollTop()-1);
}