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

Question

我为我的 Squarespace 网站添加了一个循环播放视频背景的封面。直到今天，该视频已自动调整大小以适合浏览器 window。现在，视频似乎以全分辨率播放。我不精通 JavaScript 或 CSS，所以任何帮助将不胜感激。也许它无法正确识别 "banner?" 的宽度和高度可以在 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

您的视频 width/height 似乎是基于横幅的 width/height。我不确定为什么它过去有用，但你可以尝试使用...

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

例如

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

和

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

另一种方法是修复您的横幅 width/height，然后视频会自动选择正确的值。

注意：我还没有测试过，所以不确定它是否有效。

Answer 2

横幅图片默认为响应式。您在上面定义的 '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>

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

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

html

javascript

css

video

squarespace