Question

我正在尝试修改流行的流畅jQuery脚本，以便能够垂直自动居中vimeo视频（如this），但无法弄明白。

不想看到任何黑条，一些水平裁剪会很好。

到目前为止，这是我的代码：

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>

CSS

.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;
}

JS

// 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();

Answer 1

试试这个：

在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%;
}

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

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

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

1 个答案: