响应式视频无法正确显示

Question

我正在尝试让我的视频在网页上展示代理。我设法让响应部分工作，但最初它在我的视频之后留下了很大的空间。

我已经成功定制了CSS，因此它不会为iframe CSS代码添加高度和宽度而留下空白，但现在视频显示得太大了。我真的需要它们变小。

知道我错过了什么或做错了什么？

我只使用CSS和HTML。

谢谢！

HTML：

<div class="video-responsive">

<iframe src="https://www.youtube.com/embed/ru0K8uYEZWw?ecver=2" width="640"  height="360" frameborder="0" allowfullscreen></iframe>

</div>

<h1> TEST THIS SPACE </h1>

CSS：

 /* used to make embeded videos responsive within project */

 .video-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
  max-width: 100%;
}

.video-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  max-width: 100%;
  max-height: 100%;
}