在容器中垂直居中 youtube 视频答案

【问题标题】：Vertically center a youtube video in container在容器中垂直居中 youtube 视频
【发布时间】：2016-10-05 09:38:05
【问题描述】：

我有一个响应式 Youtube 视频，我把它放在一个最大高度的容器中。视频在底部被裁剪。有没有办法平等地裁剪顶部和底部，使视频在容器内垂直居中，播放按钮在中间？

这里的 JS 小提琴： https://jsfiddle.net/3qtawjb7/

.video-outer {
  max-height: 200px;
  overflow: hidden;
  position: relative;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
}

<div class="video-outer">
  <div class="video-container">
    <iframe id="player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/feLDAys0v-c"></iframe>
  </div>
</div>

【问题讨论】：

标签： html css iframe

【解决方案1】：

JS Fiddle 怎么样：https://jsfiddle.net/p74oz13c/

我删除了：

<div class="video-outer"> ... </div>

...容器完全，然后添加：

padding-top: -50%;

... 到 .video-container 样式。

【讨论】：

这是一个很好的解决方案，但这确实意味着在移动设备上视频将被裁剪为纵向视频，而不是响应。
没错，@user2584163，我并没有真正考虑过响应能力。 ://
播放视频时也没有完全播放

【解决方案2】：

应该像这样工作：

.video-outer {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.video-container {
  position: relative;
  height: 30%;        /* height has to be defined for my changes below*/
}

.video-container iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: 100%;
}

<div class="video-outer">
  <div class="video-container">
    <iframe id="player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/feLDAys0v-c"></iframe>   		  </div>
</div>

【讨论】：

通过设置高度而不是使用最大高度意味着视频将在手机上被裁剪成纵向视频，而不仅仅是响应。

【解决方案3】：

我最终编写了一个 jQuery 解决方案，因为建议的答案没有响应。

  // vertically center video in iframe

  function centerVideo() {
    // get height of container
    $containerHeight = $( '.video-outer' ).height();
    $containerWidth = $( '.video-outer' ).width();
    $containerRatio = 360/640;

    // get height of video
    $videoHeight = $containerWidth * $containerRatio;

    // position video in center
    $heightDiff = $containerHeight - $videoHeight;
    $heightDiff = Math.round($heightDiff/2) + "px";
    $( '.video-container' ).css( 'top', $heightDiff );
  }

  // execute on load
  centerVideo();

  // recalculate on browser resize
  jQuery( window ).resize(function() {
    centerVideo();
  });

【讨论】：