时间戳

首页 > 解决方案 > iframe 纵横比 16:9 固定高度

html - iframe 纵横比 16:9 固定高度

问题描述

我正在尝试在我的网站中包含一个 YouTube 视频，但我正在努力在我的 iframe 上获得 16:9 的宽高比。我的问题是，我使用的是固定高度，但宽度很灵活。由于这是一个相当不寻常的案例，我似乎无法在任何文档或其他 StackOverflow 问题上找到解决问题的方法。这些都有固定的宽度，然后使用 padding-bottom: 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>

标签： htmliframebootstrap-4

解决方案

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

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

屏幕宽度 = 容器宽度 / 16

屏幕高度 = 屏幕宽度 * 9

Vh 相对于视口的 1%，您说您的身高需要 29vh。所以我们需要反过来做才能得到相反的（宽度）。

屏幕高度 = 29vh

屏幕宽度 = (屏幕高度 / 9) * 16

如果我们去掉尾随的 5 并向上取整，则等于 51.5，它是 52vh。

希望这可以帮助。

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

推荐阅读