user1222103 user1222103 - 6 months ago 36
Javascript Question

How do I make my Squarespace Cover page video resize correctly?

I have added a cover page for my Squarespace site that loops a video background. Up until today, that video has automatically resized to properly fit the browser window. Now, the video appears to be playing at its full resolution. I am not proficient with JavaScript or CSS, so any help would be greatly appreciated. Perhaps it stopped being able to properly identify the width and height of "banner?" The page may be viewed [at www.drypowderco.com][1] Thank you ahead of time for taking a look.

<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>

Answer

The banner image is by default responsive. The 'banner' element that you have defined above is the img tag that will be placed into the response portion of the page upon ever resize event. The 'banner' img element itself is actually hidden.

As an easy workaround, you can just set the height and width to 100% instead of relying on anything about the image currently in the banner, as ultimately that actual image isn't used.

Try this (notice I set the height and width to 100% initially and during resize):

<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'),
      banner.hide();
      var url = "https://zachary-coffin-drsn.squarespace.com/s/Sequence-01_2.mp4";
      $('<video class="bannerVideo" width="100%" height="100%" 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: 100%,
        width: 100%,
        top: banner.css('top'),
        left: banner.css('left'),
        position: 'relative',
         'object-fit': 'cover'
      });
    }
  });
</script>