下面固定 div 的响应式 iframe

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 固定在底部，同时其顶部的视频保持响应并调整到可用的 space，而不干扰底部栏？我正在考虑通过始终在其下方的 scroll/info 条来实现典型的视频播放器体验。

我更喜欢 CSS 唯一的解决方案。

Answer 1

您只需为您的视频制作全宽和全高的容器，然后用 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 2

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

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

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

我为 #theVideo 和 #bottom-bar 制作了 #container 并制作了 display:table;

然后 #theVideo 和 #bottom-bar 将是 display:table-row，但我们将使 #theVideo 具有 height:100%;，因此它将尝试成为 100%高度，但会留下 #bottom-bar

的 space

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

尝试使用 flexbox. All modern browsers support it, with 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>

Answer 5

只需修复一个 iframe 包装顶部、左侧、右侧，并从底部设置一个 px 数，并在其内部为您的 iframe 设置 100% 的宽度和高度，然后修复底部栏。像这样：

这是一个fiddleFiddle 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 6

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

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

Here is a fiddle

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

其次，我们将 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 7

您可以使用 position:fixed 作为 #bottom-bar 并给出 z-index:2，对于顶部 div z-index:1 in inline

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

Answer 8

我们开始...

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

想法是 div 包含视频：

全高 100vh 然后将宽度设置为 178vh（视口高度的 178%，即 16:9 比率）这对大多数 16:9 的屏幕来说都是一种享受高清为较窄。
对于更宽的屏幕（不太流行），我们使用 @media min-aspect-ratio 使视频全宽 100vw 并将高度设置为视口宽度的 56.25%（56.25vh).

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

然后我们用position居中absolute； left、right、top 和 bottom 为 -999px 然后设置 margin auto 将视频水平和垂直完美居中； -)

我们在包含视频的 div 中添加了 class video-container。

这里是 fiddle,
https://jsfiddle.net/Luma4221/5/

下面固定 div 的响应式 iframe

Responsive iframe with fixed div beneath it

html

css

iframe

responsive-design

responsive