I recently implemented a cover page with a looping video background on my Squarespace site. The video used to automatically resize to fit the browser window perfectly, but now it seems to be playing at its full resolution. I don't have much experience with JavaScript or CSS, so any assistance would be greatly valued. Could it be that the code is having trouble identifying the width and height of the "banner" element? You can view the page [here: www.drypowderco.com][1]. Thank you in advance for your help.
<script type="text/javascript">
$(window).bind("load", function() {
if( /Android|webOS|iPad|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
} else {
var banner = $('.sqs-slice-gallery-item > img'),
height = banner.height(),
width = banner.width();
banner.hide();
var url = "https://zachary-coffin-drsn.squarespace.com/s/Sequence-01_2.mp4";
$('<video class="bannerVideo" width="' + width + 'px" height="' + height + 'px" autoplay loop><source src="' + url + '" type="video/mp4"></video>').insertAfter(banner);
adjustBanner($('.bannerVideo'), banner);
$(window, banner).resize(function() {
adjustBanner($('.bannerVideo'), banner);
setTimeout(function() {
adjustBanner($('.bannerVideo'), banner);
}, 200);
});
}
function adjustBanner (video, banner) {
video.css({
height: banner.css('height'),
width: banner.css('width'),
top: banner.css('top'),
left: banner.css('left'),
position: 'relative',
'object-fit': 'cover'
});
}
});
</script>