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将视频保持在距离顶部200px的位置，因为我的客户希望它始终在屏幕上。

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

我究竟如何对此进行排序，或者我是否必须在链中指定一个宽度，但在一堆媒体查询中却失去了响应能力？

Answer 1

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

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

1 个答案: