栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

使用HTML5 CSS3强制iframe YouTube视频居中显示并在后台完全覆盖屏幕

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

使用HTML5 CSS3强制iframe YouTube视频居中显示并在后台完全覆盖屏幕

对于真正的全屏解决方案,可以这样实现:

的HTML

<div >    <div >      <iframe src="https://www.youtube.com/embed/I4agXcHLySs?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>    </div>  </div>

的CSS

* { box-sizing: border-box; }.video-background {  background: #000;  position: fixed;  top: 0; right: 0; bottom: 0; left: 0;  z-index: -99;}.video-foreground,.video-background iframe {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  pointer-events: none;}@media (min-aspect-ratio: 16/9) {  .video-foreground { height: 300%; top: -100%; }}@media (max-aspect-ratio: 16/9) {  .video-foreground { width: 300%; left: -100%; }}@media all and (max-width: 600px) {.vid-info { width: 50%; padding: .5rem; }.vid-info h1 { margin-bottom: .2rem; }}@media all and (max-width: 500px) {.vid-info .acronym { display: none; }}

它不是完美的,例如,不能在极端的容器长宽比下很好地工作,但是在大多数情况下都做得很好。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/432610.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号