Question

我正试图在自己的网站中加入YouTube视频，但我正在努力使iframe的宽高比为16：9。我的问题是，我的工作高度固定，但宽度灵活。因为这是一种非常不常见的情况，所以我似乎无法在任何文档或其他StackOverflow问题中找到解决问题的方法。这些都具有固定的宽度，然后使用底部填充：56.25％；来适应身高。

我正在使用bootsrap类来样式化HTML，但是我仍然在各处应用样式标签来自定义设计，这就是为什么下面包含的代码似乎有些混乱。在iframe（右侧）旁边应该有另一个div元素，该元素在代码中用id =“ text-next-to-iframe”标记

我尝试过使用上述方法，包括在iframe周围的div中加入特定的填充，然后像在固定高度情况下一样将实际iframe的宽度和高度设置为100％，但这是行不通的。我还尝试将iframe的高度设置为29vh（我需要将其设置为高度），并将宽度设置为不同的vw值（试图找到正确的值），但是最终我还是没有显示iframe两种方法。

<body style="height: 100vh; overflow: hidden;">
    <div class="container-fluid float-md-right mt-2" style="max-width: 79%; height: 100vh;">
        <div class="d-flex float-left mt-2 col-md-9" style="height: 29vh; border: 1px solid black;">
            <iframe id="YTPlayer" height="100%" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>Video wird geladen...</iframe>
            <div id="text-next-to-iframe">  
                <h2>
                    <img alt=" " src="./includes/images/BAUMorg.png" style="width: 10%;"/>
                    BAUMorg
                </h2>
                <a class="btn btn-outline-danger" href="http://www.youtube.com/channel/UC-HWN5WLWQPPIHB3dwQ9atQ?sub_confirmation=1" role="button" target="_blank" style="width: 10vw; font-size: 25px; align: center;">
                    <i class="fa fa-youtube-play"></i>
                    Subscribe
                </a>
            </div>

Answer 1

我希望我不会误解这个问题，但希望会有所帮助。

要配置纵横比，您需要将屏幕或容器的宽度除以16，然后将结果除以9以得到高度。

screenWidth = containerWidth / 16

screenHeight =屏幕宽度* 9

Vh相对于视口的1％，您说高度需要29vh。因此，我们需要反向进行操作以获得相反的宽度。

screenHeight = 29vh

screenWidth =（screenHeight / 9）* 16

如果我们减去尾随的5并四舍五入为52vh，则等于51.5。

希望这会有所帮助。

<style>
iframe{
      width: 52vh;
      height: 29vh;
    }
</style>

<iframe id="YTPlayer"  src="https://www.youtube.com/embed/t2ByLmLnYJ8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

固定高度的iframe长宽比16：9

1 个答案: