html – 具有固定div的响应式iframe

给定以下DOM结构：

<div>
    <iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo></iframe>
</div>
<div id="bottom-bar">Lorem Ipsum</div>

(See this JSFiddle for details and the styles I am already using)

如何将#bottom-bar固定在底部,同时其顶部的视频保持响应并调整到可用空间,而不会干扰底栏？我正在考虑使用始终位于其下方的滚动/信息栏来实现典型的视频播放器体验.

我更喜欢只有CSS的解决方案.

解决方法

只需修改一个iframe包装器顶部,左侧,右侧,并从底部设置一定数量的px,并在其内部为您的iframe提供100％的宽度和高度,然后修复您的底栏.像这样：

这是一个小提琴Fiddle Demo

<div class="iframe-wrapper">
  <iframe src="https://www.youtube.com/embed/Ycv5fNd4AeM?autoplay=1"></iframe>
</div>
<div class="bottom-wrapper">
  Bottom Wrapper
</div>

和Css

.iframe-wrapper{
  position:fixed;
  top:0;left:0;right:0;bottom:50px;
}
.iframe-wrapper iframe{
  width:100%;
  height:100%;
  border:none;
}
.bottom-wrapper{
  height:50px;
  position:fixed;
  bottom:0;left:0;
  width:100%;
}