html – 具有固定div的响应式iframe
发布时间:2020-12-14 18:57:16 所属栏目:资源 来源:网络整理
导读:给定以下DOM结构: div iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo/iframe/divdiv id="bottom-bar"Lorem Ipsum/div (See this JSFiddle for details and the styles I am already using) 如何将#bottom-bar固定在底部,同时其顶部的视频保持响应
给定以下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的解决方案. 解决方法
只需修改一个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%; } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |