javascript - 居中并修复响应式变形 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>