Javascript 为响应迅速、变形的youtube视频设置中心并修复填充？

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

<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>

.embed container{位置：相对；填充底部：37.5%；高度：0；溢出：隐藏；最大宽度：100%；}.embed container iframe、.embed container object、.embed container embed{位置：绝对；顶部：0；左侧：0；宽度：78.105%；高度：78.105%；}

www.speakingclips.blogspot.com

出于某种原因，我无法集中并消除youtube视频响应速度快、失真程度高的视频下方的间距。我需要的响应性和比例保持不变，但居中和底部填充更少

---

谢谢大家!

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

.embed容器{
位置：相对位置；
垫底：37.5%；
身高：0；
溢出：隐藏；
最大宽度：100%；
}
.嵌入容器iframe，
.嵌入容器对象，
.嵌入容器嵌入{
位置：绝对位置；
宽度：78.105%；
身高：78.105%；
最高：50%；
左：50%；
转化：translateX（-50%）translateY（-50%）；
}

我可以通过snippet或jsfiddle查看您的演示吗？我更新了问题，以便它显示代码。这就是您所说的代码段吗？StackOverflow上的代码段就是一个可运行的示例。请参见带有<>符号的看起来像一张纸的按钮谢谢您的工作！此外，视频的顶部和底部也有一些间距。在我的网站上，我把百分比从78.105%改为100%，让空间被视频覆盖，但是视频有点太大了，因为它完全覆盖了整个网站。有没有一种方法可以使最大视频宽度为1063px，并且具有相同的响应属性？是的，尝试在嵌入容器上设置最大宽度，而不是100%，我认为它将按照您希望的方式工作。谢谢！但现在，当我扩展浏览器的大小，宽度超过1063px时，视频的高度开始增加黑条。当网站尺寸增大时，视频的高度有没有办法保持相同的变形率？添加链接？我不是在想象。如果你拖动浏览器的一角使网站变大或变小，你会看到当它变得太大时，视频的顶部和底部会出现黑色条