Javascript 将iframe调整为嵌入式facebook视频'；s原始高度/纵横比

我正在尝试在我的网站上嵌入Facebook视频。然而，像我之前的许多人一样，我正在努力确定它们的大小

接下来，我意识到第一种方法（使用JSSDK）提供了一种简单的方法来制作可调节的视频，但速度大约是使用iframe的两倍。当然，在后一种情况下，只有视频的宽度会调整到它的容器

我尝试访问iframe的数据以获取视频的原始高度，并根据我在互联网上找到的代码样本调整其宽度，但由于同源策略，无法访问

https://www.facebook.com/destanie.wagner/videos/2391334934255393/

。嵌入iframe facebook{
最大宽度：300px；
}
.嵌入iframe facebook div{
位置：相对位置；
身高：0；
垫面：178%；
}
.嵌入iframe facebook iframe{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}

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

---

因此，我的问题是：如何让iframe根据嵌入视频调整其高度？

可以让iframe填充其父div

例如：

.container{
显示：块；
高度：100vw；
}
.iframeContainer{
显示：块；
宽度：100%；
身高：100%；
填充：0px；
明确：两者皆有；
}
.嵌入区域{
明确：两者皆有；
宽度：100vw；
}

并使用以下HTML标记

No，您根本无法使用JavaScript访问iframe的内容，因为它是从不同的域（同源策略）加载的。SDK可以在后台进行跨域通信，并且能够以这种方式动态调整元素大小。我知道，我在问题中提到了SOP。但是可以通过一些间接的方式来访问iframe的内容大小（例如，iframe是一个黑匣子，但是这个黑匣子仍然会影响它的环境）；这就是iframe如何将其内容的高度传递给页面中运行的SDK代码。如果（！）通过iframe直接嵌入的版本也能做到这一点，您可以尝试自己使用自己的自定义JS代码来收听这些消息。这听起来是一条有趣的信息，您是否有任何来源可以让我了解更多信息？请转到上面列出的文档页面，并执行

window.addEventListener（“消息”，函数（事件）{console.log（事件）}，false）通过浏览器控制台。然后在生成器中更改插件的宽度，您应该会看到记录了几个MessageEvents，其中一个包含
数据
，字符串类似
“type=resize&width=450&height=252&cb=f2c5a44747b7aec&domain=developers.facebook.com&origin=https%3A%2F%2Fdevelopers.facebook.com%2f1babf41e83d78&relation=parent.parent”
尽管我的问题正好相反：让iframe调整到其内容。为了清楚起见，我编辑了我的问题。