为响应式变形 youtube 视频居中并修复填充？

Question

这是我拥有的视频及其所在网站的代码：

<center><style>.embed-container { position: relative; padding-bottom: 37.5%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 78.105%; height: 78.105%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/R-5G2NvjfQk' frameborder='0' allowfullscreen='1'></iframe></div></center>

www.speakingclips.blogspot.com

由于某种原因，我无法居中并消除响应式变形 youtube 视频下方的间距。我需要响应性和比率保持不变，但要居中且底部填充较少。

谢谢！

Answer 1

由于容器设置为使用不使用高度来保持其纵横比并且使用百分比设置填充，因此您绝对可以将视频定位在中心。将视频从容器的左侧和顶部设置为 50%，然后将其向上和向左调整其高度和宽度的 50%。它很干净，跨浏览器，并且可以更改 78.105% 的值，并且元素将保持居中。

.embed-container {
  position: relative;
  padding-bottom: 37.5%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  width: 78.105%;
  height: 78.105%;
  top: 50%;
  left: 50%;
  transform: translateX( -50%) translateY( -50%);
}

<div class='embed-container'>
  <iframe src='https://www.youtube.com/embed/R-5G2NvjfQk' frameborder='0' allowfullscreen='1'></iframe>
</div>