【问题标题】: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 成为:

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

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

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

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

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

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2014-04-11
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多