javascript - 如何正确调整我的 Squarespace 封面视频大小？

Question

我为我的 Squarespace 网站添加了一个循环视频背景的封面页。直到今天，该视频已自动调整大小以适合浏览器窗口。现在，视频似乎正在以全分辨率播放。我不精通 JavaScript 或 CSS，所以任何帮助将不胜感激。也许它无法正确识别“横幅”的宽度和高度？该页面可以在 [www.drypowderco.com][1] 上查看，提前感谢您的浏览。

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

横幅图像默认是响应式的。您上面定义的“banner”元素是 img 标签，在调整大小事件时将被放置到页面的响应部分中。 “banner”img 元素本身实际上是隐藏的。

作为一种简单的解决方法，您可以将高度和宽度设置为 100%，而不是依赖于横幅中当前图像的任何内容，因为最终不会使用实际图像。

试试这个(注意我最初和调整大小期间将高度和宽度设置为 100%):

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