我最近玩过html5并且遇到了使用的想法
使用以下HTML代码作为网站背景的全屏视频:
<video id = "video_background" preload = "auto" autoplay = "true" loop = "loop"> <source src = "videos/football.mp4" type = "video/mp4" /> </video>
另外,我使用以下css代码来正确对齐它:
#video_background{ position: absolute; bottom: 0px; right: 0px; min-width: 100%; min-height: 100%; max-width: 4000%; max-height:4000%; width: auto; height: auto; z-index: -1000; overflow: hidden; }
它工作得很好,但我希望我的视频水平居中
在每个浏览器分辨率.
无论我试图通过哪种方式实现这种效果(通过保证金或基于百分比的定位),
视频保持坚持正确的底部.
关于如何解决这个“问题”的任何想法?
解决方法
这是一个JQuery函数,我写了很长一段时间才使视频成为全屏背景.基本上,如果窗口的纵横比高于视频的纵横比,则使高度100%和宽度自动,反之亦然,以获得更宽的纵横比窗口.
// Resize the video elements so that we don't get any borders due to aspect ratio function resizeVideo() { if ($(window).height() > $(window).width() * 0.5425) { // Which dimension is bigger dependant on aspect ratio (16:9) $("video").removeAttr("height").removeAttr("width").width("auto").height("100%"); } else { $("video").removeAttr("height").removeAttr("width").width("100%").height("auto"); } }; // Add the resize function to the window resize event but put it on a short timer as to not call it too often var resizeTimer; $(window).resize(function () { clearTimeout(resizeTimer); resizeTimer = setTimeout(resizeVideo,150); });
原文地址:https://www.jb51.cc/html/231510.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。