Question

我为Squarespace网站添加了一个封面视频背景。直到今天，该视频已自动调整大小以适合浏览器窗口。现在，视频似乎以全分辨率播放。我不熟悉JavaScript或CSS，所以任何帮助将不胜感激。也许它不能正确识别＆＃34; banner的宽度和高度？＆＃34;该页面可以在[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

看起来您的视频宽度/高度偏离横幅的宽度/高度。我不确定为什么以前会工作，但你可以尝试使用......

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

e.g。

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'
  });

另一种方法是修复横幅宽度/高度，然后视频会自动获取正确的值。

注意：我没有对此进行测试，因此不确定它是否有效。

Answer 2

横幅图片默认是响应式的。横幅＆＃39;横幅＆＃39;您在上面定义的元素是img标记，它将在调整大小事件时放入页面的响应部分。横幅＆＃39;横幅＆＃39; 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 Cover页面视频大小？

2 个答案: