带有固定 div 的响应式 iframe
Posted
技术标签:
【中文标题】带有固定 div 的响应式 iframe【英文标题】：Responsive iframe with fixed div beneath it 【发布时间】：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。 底栏是固定高度还是可变高度？ 【参考方案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&cc_load_policy=0&controls=0&iv_load_policy=3&modestbranding=1&rel=0&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&cc_load_policy=0&controls=0&iv_load_policy=3&modestbranding=1&rel=0&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&cc_load_policy=0&controls=0&iv_load_policy=3&modestbranding=1&rel=0&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&cc_load_policy=0&controls=0&iv_load_policy=3&modestbranding=1&rel=0&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&cc_load_policy=0&controls=0&iv_load_policy=3&modestbranding=1&rel=0&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/
【讨论】：
以上是关于带有固定 div 的响应式 iframe的主要内容，如果未能解决你的问题，请参考以下文章