Javascript 如何强制流体Vimeo iframe垂直自动居中？

我试图修改流行的fluid jQuery脚本，使其能够垂直自动居中vimeo视频（如），但无法解决这个问题

不想看到任何黑条，一些水平裁剪就可以了

以下是我目前的代码：

HTML

<div class="container">
    <div class="videoWrapper">
        <iframe class="js-resize" src="http://player.vimeo.com/video/80836225?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1" frameborder="0" scrolling="no" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
</div>

JS

.container {
    height: 100%;
    width:auto;
}
.videoWrapper {
    position: relative;
    height: 100%;
    width: auto;
}

.videoWrapper iframe,
.videoWrapper embed,
.videoWrapper object {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}


html, body {
  margin: 0px;
  padding: 0px;
}

// jQuery 1.6.2

// Find all YouTube videos
var $allVideos = $("iframe[src^='http://player.vimeo.com'], iframe[src^='http://www.youtube.com']"),

    // The element that is fluid width
    $fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

  $(this)
    .data('aspectRatio', this.height / this.width)

    // and remove the hard coded width/height
    .removeAttr('height')
    .removeAttr('width');

});

// When the window is resized
$(window).resize(function() {

  var newWidth = $fluidEl.width();

  // Resize all videos according to their own aspect ratio
  $allVideos.each(function() {

    var $el = $(this);
    $el
      .width(newWidth)
      .height(newWidth * $el.data('aspectRatio'));

  });

// Kick off one resize to fix all videos on page load
}).resize();

试试这个：

在CSS中，将高度设置为

videoWrapper iframe {height:XXXXpx;}

其中XXXX将是以像素为单位的期望高度值

然后添加到

videoWrapper iframe {margin-top:-XXpx;}

其中-XXpx是您的全高值的一半

最后，在videowarpper iframe集合中：

videoWrapper iframe {position:absolute; top:50%;}

因此，您将以以下内容结束：

.videoWrapper {
position: relative;
height: 100%;
width: auto;
}

.videoWrapper iframe,
.videoWrapper embed,
.videoWrapper object {
position: absolute;
width: 100%;
height: XXXXpx;
margin-top: -XXpx;
left: 0;
top: 50%;
}

这应该将对象的上边距设置为其自身的垂直中心，然后将该边距（现在位于对象的中心）精确定位在屏幕的中心

---

我还没试过，但试一下，如果有帮助请告诉我

您是否注意到

.container

元素缺少结束标记？谢谢，已修复！黑条还在那里。