Question

我正在尝试将Facebook视频嵌入到我的网站中。但是像我之前的许多人一样，我正在努力调整它们的大小。

在the official documentation之后，我意识到第一种方法（使用js SDK）提供了一种可调节视频的简单方法，但速度大约是使用iframe的两倍。当然，在后一种情况下，只有视频的宽度会根据其容器进行调整。

我尝试访问iframe的数据以获取视频的原始高度，并根据我在互联网上找到的代码示例获取CSS来调整视频的宽度，但由于相同的原始政策而无法访问

<div class="root">
<div id="35-365098" class="embed-iframe-facebook">
  <div>
    <iframe id="iframe-35-365098" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fdestanie.wagner%2Fvideos%2F2391334934255393%2F&amp;show_text=0" style="border:none;" scrolling="no" allowtransparency="true" allowfullscreen="true" frameborder="0"> </iframe>

  </div>
  <span class="origin-url" hidden="">https://www.facebook.com/destanie.wagner/videos/2391334934255393/</span>

  </div>
</div>

.embed-iframe-facebook {
  max-width: 300px;
}

.embed-iframe-facebook div {
  position: relative;
  height: 0;
  padding-top: 178%;
}

.embed-iframe-facebook iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

此外，我似乎无法找到一种方法来告诉iframe“根据其内容调整其大小”。理想情况下，我想这样做，并检测其高度，以便调整其宽度，以创建人为的“最大高度”。

因此，我的问题是：我如何让iframe调整其高度以适应嵌入式视频？

Answer 1

可以让iFrame填充其父div。

例如：

.container {
    display: block;
    height: 100vw;
}
.iframeContainer {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0px;
    clear: both;
}
.embed-area {
    clear: both;
    width: 100vw;
}

并使用以下HTML标记。

<div class="root">
    <div class="container">
        <div class="embed-area">
            <div class="iframeContainer">
               <!-- Render the iFrame in this div. -->
               <!-- It will now fill up the div, unless other style rules are preventing it. -->
            </div>
        </div>
   </div>
</div>

将iframe调整为嵌入的Facebook视频的原始高度/长宽比

1 个答案: