当位置变为“固定”时，Sticky.js 会更改 DIV 的宽度

Question

我有两个可变宽度的容器元素。

http://maxwellrushton.com/buy-in-bleed-out/

在其中一个中，右侧（当前为黑色以保持明显）有一个视频。它目前是其父级宽度的 100%。

<div id="buy-in-video-container" class="container">

<iframe  class="buy-now-iframe" width="500" height="281" src="//www.youtube.com/embed/mYNWY4tRWOo" frameborder="0" allowfullscreen></iframe>

</div><!-- /#buy-invideo-container-->

与：

.page-id-511 #buy-in-video-container{
display: inline-block;
width: 40%;
margin: 0 2.5% 0 2.5%;
height: 100px;
background-color: #000;
position: relative;
margin-top: 100px;
height: 100%;
overflow: hidden;
height: 1000px;
}

.buy-now-iframe{
width: inherit;
z-index: 1200;
position: relative;
}

我使用 Sticky.js 将视频固定在距离顶部 200 像素的位置，因为我的客户希望它始终在屏幕上。

我无法指定宽度，因为它会变化，但我也无法指定位置，因为它也会变化。

我到底该如何排序，或者我必须在链的上游指定一个宽度，然后在一堆媒体查询废话中失去响应能力？

Answer 1

原来答案是用具有相同 css 属性的 div 包围 iframe。显然，sticky.js 不能以同样的方式欣赏动态内容，例如 iframe。