Javascript 儿童iframe作为背景视频并保持比例

我想将任何网站的iframe.children视频设置为div.parent背景。子iframe将始终大于父div，并且父div溢出将被隐藏。Iframe还将保持纵横比。我发现了一些jquery插件，但我想了解它是如何工作的。请帮帮我。

你说的基本上是内在比率†。比率必须将宽度和高度保持在恒定的相对值，因此当宽度增加或减少时，视频的高度当然也会保持不变。我们可以通过创建一个容器来实现这一点，该容器通常具有所需的尺寸（宽屏尺寸通常为16:9或4:3），并将iframe和/或视频放置在该容器中

通常用于嵌入iframe中的响应视频的技术如下：

包装箱，又称容器或包装物

此div将由任何重新调整大小触发。对于DOM中的任何元素，重新调整大小至少涉及高度和宽度的计算

在这篇文章的后面，我做了一个简单的演示

注意宽度：100%，填充底部：56.25%

如果宽度从100px增加到200px，则高度从56.25px增加到112.5px

通过设置填料底部：56.25%，始终保持16:9的比例。如果你有一个长宽比为4:3的旧视频，你会使用padding bottom:75%。如果你有一个非标准的长宽比，比如8:21，你可以通过将分母除以分子来找到padding bottom的百分比，比如：8/21=.38=38%。商被四舍五入

因此，时髦的衬垫底部百分比就像一个充气垫，根据宽度的变化而充气或放气，但只足以在比率的参数范围内重新调整高度

额外的填充顶部是为了对抗巨大的填充底部，否则视频会被推得太远，导致元素重叠。高度：0可能是不必要的，因为这个奇怪的值是用来处理的。我只是把它放在那里，只是为了那个边缘情况，你知道，只是为了你的时间回到2001或你住在一个洞穴中的戈贝沙漠。 iframe

iframe的规则集更容易解释。简单地说，iframe和视频的高度和宽度被拉伸到完全适合.box。所以基本上是.box完成了所有的工作，iframe继续运行并符合.box的尺寸

.盒子{ 位置：相对位置； 垫底：56.25%； /* [56.25%= 16:9 ] [ 75% = 4:3 ] [ 41.66% = 24:10 ] */ 填充顶部：25px； 身高：0； } .box iframe{ 位置：绝对位置； 排名：0； 左：0； 身高：100%； 宽度：100%； }