全出血视频，保持纵横比，居中，纯javascript

我希望我的元素保持其纵横比，但充当“全出血”或更确切地说是全浏览器体验。视频应向上或向下以适应新的浏览器窗口尺寸，但也应在浏览器窗口中居中。有时，一些视频会被裁剪——这对我来说没关系。我正在尝试使用纯JS为视频元素重新创建BackgroundCoverCSS属性，如果这有助于您想象的话。对于那些不知道这是什么的人，以下是：

.bkgdCover{
  background: no-repeat center center;
 -webkit-background-size: 100% 100%;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

以下是我在纯javascript中的尝试：

function getWinSize(){
    var wid = 0, hei = 0;

    if (document.documentElement && document.documentElement.clientHeight){
        wid = parseInt(window.innerWidth,10);
        hei = parseInt(window.innerHeight,10);
    } else if (document.body){
        wid = parseInt(document.body.offsetWidth,10);
        hei = parseInt(document.body.offsetHeight,10);
    }
    return [wid,hei];
}

this.resize2 = function(){
    fullBleedVideoPlayer();
};

function fullBleedVideoPlayer() {
    var viewport=getWinSize();
    var videoRatio = 1080 / 1920;
    var browserHeight = viewport[0];
    var browserWidth = viewport[1];
    var tmp_windowRatio = viewport[1] / viewport[0];
    if (videoRatio > tmp_windowRatio) {
        tmp_height = Math.round(browserWidth * videoRatio);
        _player.style.width= browserWidth+ "px";
        _player.style.height= tmp_height+ "px";
        _player.style.marginLeft = 0 + 'px';
        _player.style.marginTop = -Math.round((tmp_height - browserHeight) / 2) + 'px';
    } else {
        tmp_width = Math.round(browserHeight * (1 / videoRatio));
        _player.style.width= tmp_width+ "px";
        _player.style.height= browserHeight+ "px";
        _player.style.marginLeft = -Math.round((tmp_width - browserWidth) / 2) + 'px';
        _player.style.marginTop = 0 + 'px';
    }
}

---

不幸的是，这并没有重现CSS封面。如果你能看到我在哪里犯了错误，或者你自己也犯了同样的错误，我很想听听你的意见。请只使用纯JS解决方案。

我只是做了一些类似的事情，只是它不是完全全屏的，它是一个页眉高度为450px‘ish’的背景视频。我说ish是因为我使用的是25vw，它根据视口宽度改变高度。我基本上想让视频保持在中心位置，但是怎么做呢

HTML

JS

这样做的目的是使视频即使在调整窗口大小时也保持相同的纵横比，将其放置在主页的底部，这使其响应良好，而不会使您看到视频包装的背景色，但显然不居中。 jQuery只是将videowrapper设置为偏移videowrapper元素高度与其父元素高度的高度差。允许纵横比保持不变，在需要时对视频进行出血，但允许视频垂直居中于其父元素

---

这是非常粗糙的，因为我大约一个小时前才开始做这项工作，所以我确信我需要重新修改并拨打电话，但希望这有助于你沿着你的路径前进，应该是相同的解决方案，除了你对视频元素或视频包裹元素的外光线和视口高度进行高度检查。

btw，我知道有一些CSS，但我想说的是元素的位置和检查的内容。不过，使用JS可以轻松做到这一点。

<section id="homepage--hero">
  <div class="fullpage-video-wrapper">
    <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
      <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
      <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
      <!-- doesnt support video -->
      <img src="#" style="width: 100%; height: auto;" />
    </video>
  </div>
</section>

#homepage-hero {
  display: block;
  height: 35vw;
  width: 100%;
  position:
  relative;
  overflow: hidden;
}

.fullpage-video-wrapper {
    position: absolute;
    bottom: 0px;
    left: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden;
}

.fullpage-video-wrapper {
    min-height: 100%;
    min-width: 100%;
}

if( $('.fullpage-video-wrapper').length > 0 ) {
    var videoWrapper = $('.fullpage-video-wrapper'),
        videoParentWrapper = $(videoWrapper).parent();

  if($(videoWrapper).height() > $(videoParentWrapper).height() ) {
    var difference = ($(videoWrapper).height() - $(videoParentWrapper).height()) / 4
    $(videoWrapper).css({
      bottom: -parseInt(difference)
    });
  }

  $(window).resize(function(){
    if($(videoWrapper).height() > $(videoParentWrapper).height() ) {
      var difference = ($(videoWrapper).height() - $(videoParentWrapper).height()) / 4
      $(videoWrapper).css({
        bottom: -parseInt(difference)
      });
    }
  });
 }