我使用的是最新版本的引导程序，并使用引导程序容器为我的YouTube视频提供了响应式嵌入。容器的大小在容器的限制范围内很好，但是，视频在横向时看起来非常大，占用了太多空间。我认为这是因为引导容器类根据媒体查询更改其宽度，这对于纵向移动设备效果很好，但对于横向移动设备则不行。这是我使用的标准代码：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content-wrapper" class="container">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/" allowfullscreen></iframe>
</div>
</main>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>有什么方法可以修复容器，以便它改善视频的横向格式？
TL;博士
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/" onload = "document.getElementById('my_id').style.maxHeight = window.innerHeight;" id = "my_id" allowfullscreen></iframe>
不推荐的方式(添加vh(
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/" style = "max-height: 100vh;" allowfullscreen></iframe>
核心问题是移动浏览器(我在看你，Chrome和Safari(有一个"有用"功能，其中地址栏有时可见，有时隐藏，从而更改视口的可见大小。这些浏览器不是在视口高度变化时将 100vh 的高度调整为屏幕的可见部分，而是将 100vh 设置为浏览器的高度，并隐藏地址栏的地址。结果是，当地址栏可见时，屏幕的底部将被切断，从而违背了100vh的目的。
更好的解决方案(window.innerheight(
解决这个问题的一种方法是依赖javascript而不是css。当页面加载时，将高度设置为window.innerHeight将正确地将高度设置为窗口的可见部分。如果地址栏可见，则window.innerHeight将是全屏的高度。如果地址栏是隐藏的，那么window.innerHeight将只是屏幕可见部分的高度，正如您所期望的那样。源
在您不调整浏览器窗口大小之前，这工作得很好。
如果调整窗口大小，则需要根据新window.innerheight更改高度。这可以通过在每次窗口调整大小或元素(即视频(调整大小时调用函数来实现
完整代码
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body onresize = "my_function();">
<main id="content-wrapper" class="container">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/" onload = "my_function();" onresize = "my_function();" id = "embed1" allowfullscreen></iframe>
</div>
</main>
</body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script>
function my_function()
{
document.getElementById('embed1').style.maxHeight = window.innerHeight;
}
</script>