Javascript 如何使Youtube嵌入适合屏幕高度，同时让其宽度溢出

我正在构建一个包含youtube嵌入作为标题的网站。这个youtube嵌入版响应迅速，在任何浏览器大小上都能很好地伸缩，但有一个问题：即使使用填充底部：56.25%的技巧，视频也比屏幕大小高，而宽度是完美的。我需要某种解决方案，使视频的高度与视口大小匹配，并因此裁剪或隐藏视频上的任何“额外”宽度

HTML:

---

我在16:10的屏幕上测试了这个，它看起来很完美。提前谢谢。

你为什么要这么做？ 你不想让人们看到完整的视频吗

您可以通过将响应容器包装在一个div中来实现这一点，该div上设置了溢出隐藏。然后使用一些javascript将视口的高度添加为高度，这样它就可以覆盖整个屏幕

$(document).ready(function(){
  height = $(window).height();
  $(".viewport_control").css({"height": height});
});

此外，您可能希望将视频居中，因此添加

top: 50%;
left: 50%;
transform: translate(-50%, -50%)

我给你建了一个密码笔，这样你就可以看到它的作用

---

你好。你解决了这个问题吗？我也面临同样的问题。

$(document).ready(function(){
  height = $(window).height();
  $(".viewport_control").css({"height": height});
});

top: 50%;
left: 50%;
transform: translate(-50%, -50%)