Question

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

Answer 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%;
}

Answer 2

您可以使用diplay:table;和table-row来实现此目标

我为#container和#theVideo制作了#bottom-bar并制作了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/

Answer 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;
}

Answer 4

您可以position:fixed使用#bottom-bar并使用z-index:2代替内联<{p>>中的顶级div z-index:1

＆＃13;

<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>

＆＃13;

Answer 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();
})

Answer 6

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

<强> jsFiddle

<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>

numericMax

Answer 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/

Answer 8

我们走了......

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

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

全高100vh然后制作宽度178vh（视口高度的178％，即16：9比例），这对大多数屏幕来说都是一种享受，这种屏幕的宽度为16：9 hd。 / LI>
对于更宽屏幕（不是很受欢迎），我们使用@media min-aspect-ratio制作视频全宽100vw，并将高度设置为视口宽度的56.25％（56.25vh）

因此，视频在高度和宽度方面总是比可用屏幕大： - ）

然后我们将其与position absolute对齐; left，right，top和bottom为-999px，然后将margin auto设置为水平和垂直完美居中的视频; - ）

我们在包含视频的video-container中添加了一个课程div。

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

响应式iframe，下方有固定div

8 个答案: