我有两个可变宽度的容器元素。
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 像素的位置，因为我的客户希望它始终在屏幕上。
我无法指定宽度，因为它会变化，但我也无法指定位置，因为它也会变化。
我到底该如何排序，或者我必须在链条上指定一个宽度，然后在一堆媒体查询废话中失去响应能力？