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>

Answers


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>

It looks like you are basing your video width/height off the width/height of the banner. I'm not sure why that used to work but you could try use...

$(window).width();
$(window).height();

e.g.

var banner = $('.sqs-slice-gallery-item > img'),
        height = $(window).height(),
            width = $(window).width();

and

video.css({
    height: $(window).height(),
    width: $(window).width()
    top: banner.css('top'),
    left: banner.css('left'),
    position: 'relative',
     'object-fit': 'cover'
  });

The alternative is to fix your banner width/height and then the video will automatically pick up the correct value.

Note: I haven't tested this so not sure if it will work or not.


Need Your Help

jQuery selector regular expressions

javascript jquery regex jquery-selectors

I am after documentation on using wildcard or regular expressions (not sure on the exact terminology) with a jQuery selector.

How to implement SDP in C or C++?

c++ c sdp

I am trying to find examples of using Session Descriptor Protocol (SDP) with C++ or C. Can you recommend some literature, or webpages? I know about RFC 4566, but this specification is useless to me,