带有固定 div 的响应式 iframe答案

【问题标题】：Responsive iframe with fixed div beneath it带有固定 div 的响应式 iframe
【发布时间】：2016-10-07 22:01:00
【问题描述】：

给定以下 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 的解决方案。

【问题讨论】：

我理解正确：您是否正在寻找底部固定 div 的完整浏览器窗口视频？
是的，就是这样。
您在这里只使用 YouTube 视频吗？
是的，仅限 YouTube。
底栏是固定高度还是可变高度？

标签： html css iframe responsive-design responsive

【解决方案1】：

只需在顶部、左侧、右侧修复 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%;
}

【讨论】：

【解决方案2】：

你可以使用diplay:table;和table-row来实现这个

我为#theVideo 和#bottom-bar 制作了一个#container 并使其成为display:table;

那么#theVideo 和#bottom-bar 将是display:table-row，但我们会让#theVideo 具有height:100%;，所以它会尝试100% 的高度，但会留下#bottom-bar 的空间

<div id="container">

  <div id="theVideo">
    <iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo?autoplay=1&amp;cc_load_policy=0&amp;controls=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;showinfo=0"></iframe>
  </div>
  <div id="bottom-bar"><p>Lorem Ipsum</p></div>

</div>

CSS：

body {
  background-color: black;
  color: white;
  margin: 0;
}
#container{
  position:absolute;
  width:100%;
  height:100%;
  display:table;
}
#theVideo{
  display:table-row; 
  height:100%;
}
#theVideo iframe{
  width: 100%;
  height: 100%;
  border: none;
}
#bottom-bar{
  display: table-row;
  background-color: rgb(51, 51, 51);
}
#bottom-bar p{
  margin:0;
  padding:5px;
}

在此处查看演示 https://jsfiddle.net/pgr26vg0/2/

【讨论】：

太棒了！你能谈谈你的解决方案的浏览器兼容性吗？
这个方案对浏览器兼容性没有任何问题。它适用于所有浏览器。

【解决方案3】：

我通常会同意 Drinkin People 的回答。但我可以想象，将所有内容放在固定位置上，在网页上远非理想。所以我想出了一些其他的东西，可以做你想要的，但也是可滚动的。

该方法依赖于 calc 函数和 vh（视口高度）。因此，如果您决定使用此方法，请记住是否要支持较旧的浏览器。

Here is a fiddle

首先我们将容器的宽度设置为 100%，将其高度设置为 calc(100vh - 20px)。 20px 是为您的#bottom-bar 指定的空间。

其次，我们将 iframe 的宽度和高度设置为 100%。还将边框设置为 0，因为如果我们不这样做会导致滚动条出现小问题。

第三，我们给出底栏尺寸。宽度：100%，高度：20px；

这将创建一个全屏视频查看器，其中包含您想要的底部栏。我还为可选的滚动效果添加了“#more-stuff”。如果您不想要滚动效果，只需将其删除。

PS：如果替换高度：calc(100vh - 20px);最大高度：计算（100vh - 20px）。它也应该在改变大小的 div 容器中工作。

HTML

  <div id="iframe-container">
    <iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo?autoplay=1&amp;cc_load_policy=0&amp;controls=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;showinfo=0"></iframe>
  </div>
  <div id="bottom-bar">Lorem Ipsum</div>
  <div id="more-stuff"></div>

CSS

body {
  background-color: blue;
  color: white;
  margin: 0;
}
#iframe-container{
  height: calc(100vh - 20px);
  width: 100%;
}
#iframe-container iframe{
  width: 100%;
  height: 100%;
  border: 0px;
}
#bottom-bar{
  width: 100%;
  height: 20px;
  background-color: black;
}
#more-stuff{
  width:100%;
  height: 400px;
  color: yellow;
}

【讨论】：

谢谢！但是，我想要一个所有内容都已修复的网站。抱歉，我没有在我的问题中指定这一点。

【解决方案4】：

您可以将position:fixed 用于#bottom-bar，并将z-index:2 用于内联顶部div z-index:1

<body>
<style>
body {
  background-color: black;
  color: white;
  margin: 0;
}
#bottom-bar{
	position: fixed;
	bottom: 0;
	z-index: 2;
	width: 100%;
}
</style>
  <div style="position: relative; display: block; height: 0px; padding: 0px 0px 56.25%; overflow: hidden;z-index:1;">
    <iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo?autoplay=1&amp;cc_load_policy=0&amp;controls=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;showinfo=0" style="position: absolute; top: 0px; left: 0px; bottom: 0px; height: 100%; width: 100%; border: 0px;"></iframe>
  </div>
  <div id="bottom-bar" style="background-color: rgb(51, 51, 51); padding: 5px;">Lorem Ipsum</div>
</body>

【讨论】：

【解决方案5】：

您只需为视频制作全宽和全高的容器，然后使用 CSS 固定底部栏。如果要确保底部页脚不与视频重叠，则必须使用 JavaScript 并进行调整。

HTML：

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo?autoplay=1&amp;cc_load_policy=0&amp;controls=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;showinfo=0"></iframe>
</div>
<div id="bottom-bar">Lorem Ipsum</div>

然后是 CSS：

body {
    margin: 0;
}
.video-container {
    width: 100%;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
#bottom-bar {
    position: fixed;
    width: 100%;
    background: white;
    bottom: 0;
}

假设有 jQuery，这里是 JavaScript：

$(function() {
    var resizeVideo = function() {
        $(".video-container, .video-container iframe").height($(document).height() - $("#bottom-bar").height());
    }
    $(window).resize(resizeVideo);
    resizeVideo();
})

【讨论】：

我不能让底部栏覆盖视频，因为这不符合 YouTube 的 T&Cs
在这种情况下您必须使用 JavaScript。请参阅我编辑的答案。
您可以在页面底部添加一个等于底栏高度的边距：video-container {margin-bottom: 40px;} 另外#bottom-bar {height: 40px}到上面的 CSS。

【解决方案6】：

尝试使用flexbox。所有现代浏览器都支持它，prefixes 它也适用于 IE10。页脚可以是动态高度，因此在文本换行时也可以使用。我还将您示例中的所有内联样式移至 CSS 面板，以便于查看。

jsFiddle

html, body {
  height: 100%;
}
body {
  background-color: black;
  color: white;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.video-player {
  flex: 1;
  position: relative;
}
.iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.bottom-bar {
  background-color: rgb(51, 51, 51);
  padding: 5px;
}

<div class="video-player">
  <iframe src="https://www.youtube.com/embed/TpBF_DRxWSo?autoplay=0&amp;cc_load_policy=0&amp;controls=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;showinfo=0" class="iframe"></iframe>
</div>
<div class="bottom-bar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et magna volutpat, hendrerit nisi nec, tincidunt risus. Aliquam eu massa et lectus cursus dapibus.</div>

【讨论】：

【解决方案7】：

如果您可以稍微移动标记，则可以更轻松地保持栏相对于容器：

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

接下来，您可以使用 this trick 使视频容器响应：

.video-container {
  height: 0;
  width: 100%;
  padding-bottom: 56.25%;
  position: relative;
}

.video-container iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

最后，把你的栏杆放在底部：

#bottom-bar {
   padding: 10px;
   position: absolute;
   width: 100%;
   left: 0;
   top: 100%;
}

在此处查看实际操作：https://jsfiddle.net/7qure8f5/1/

【讨论】：

【解决方案8】：

我们开始...

我假设您希望视频跨越屏幕上的整个可用区域...

想法是让包含视频的 div 成为：

全高 100vh 然后设置宽度 178vh（视口高度的 178%，即 16:9 的比例）这对于大多数 16:9 hd 的屏幕来说是一种享受。
对于更宽的屏幕（不是很受欢迎），我们使用@mediamin-aspect-ratio 使视频全宽100vw 并将高度设置为视口宽度的56.25% (56.25vh)。

因此视频在高度和宽度上总是大于可用屏幕:-)

然后我们以positionabsolute为中心； left, right, top 和 bottom 设置为 -999px 然后设置 margin auto 完美地在水平和垂直方向居中视频;-)

我们向包含视频的div 添加了一个类video-container。

这是一个小提琴，
https://jsfiddle.net/Luma4221/5/

【讨论】：