关于网页动态背景的设置
我想用一个mp4视频做背景，该怎么设置，希望给我一些代码最好告诉我一下原理，急求谢谢各位哥哥了
求大神待我完成这个功能求！！！！
把视频fixed定位，长宽都是100%，loop就好
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('video').attr({'width':window.innerWidth,'height':window.innerHeight})
$(window).resize(function(){
$('video').attr({'width':window.innerWidth,'height':window.innerHeight})
})
})
</script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
video{
position: fixed;
top:0px;
left: 0px;
}
</style>
<body>
<video loop="loop" autoplay="autoplay">
<source src="myvideo.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
</video>
</body>
</html>
http://www.htmleaf.com/Demo/201511012732.html
效果演示
<!DOCTYPE HTML>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="zh"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="zh"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="zh"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="zh"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5全屏背景视频jQuery插件效果演示_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
<meta name="keywords" content="html5视频,背景视频,视频,jquery,html5,全屏背景视频,视频播放" />
<meta name="description" content="HTML5全屏背景视频jQuery插件效果演示。" />
<link rel="shortcut icon" href="http://www.htmleaf.com/favicon.ico">
<link rel="apple-touch-icon" href="http://www.htmleaf.com/templets/default/images/ico/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="http://www.htmleaf.com/templets/default/images/ico/apple-touch-icon-72.png">
<link rel="apple-touch-icon" sizes="114x114" href="http://www.htmleaf.com/templets/default/images/ico/apple-touch-icon-114.png">
<link rel="apple-touch-icon" sizes="144x144" href="http://www.htmleaf.com/templets/default/images/ico/apple-touch-icon-144.png">
<link rel="stylesheet" type="text/css" href="http://www.htmleaf.com/templets/default/css/htmleaf-demo.min.css" />
<!--[if lt IE 9]>
<script src="http://www.htmleaf.com/assets/js/html5shiv.min.js"></script>
<script src="http://www.htmleaf.com/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="htmleaf-container">
<div class="htmleaf-container--header">
<div class="logo">
<a href="http://www.htmleaf.com/"><img src="http://www.htmleaf.com/templets/default/images/logo.svg" alt="jQuery之家"></a>
</div>
<h1>HTML5全屏背景视频jQuery插件效果演示</h1>
<div class="responsive">
<a href="#" class="desktop active" title="在桌面浏览器中预览"></a>
<a href="#" class="tabletlandscape" title="平板Landscape模式 (1024x768)"></a>
<a href="#" class="tabletportrait" title="平板Portrait模式 (768x1024)"></a>
<a href="#" class="mobilelandscape" title="移动手机Landscape模式 (480x320)"></a>
<a href="#" class="mobileportrait" title="移动手机Portrait模式 (320x480)"></a>
</div>
<div class="actions">
<div class="action">
<a href="http://www.htmleaf.com/html5/yinpinheshipin/201511012731.html" class="button button--empty" title="返回下载页"><i class="fa fa-leaf"></i></a>
</div>
</div>
</div>
<div class="htmleaf--main">
<div class="htmleaf-container--side">
<!--广告位-->
<div class="htmleaf-adv">
<h2 class="title">广告</h2>
<div>
<script type="text/javascript">
/*200*200*/
var cpro_id = "u2034900";
</script>
<script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>
</div>
</div>
<!--相关插件-->
<div class="htmleaf-related">
<h2>相关插件</h2>
<a href="http://www.htmleaf.com/html5/yinpinheshipin/201505261910.html">
<img src="http://img.htmleaf.com/1505/201505261751.jpg" width="300" alt="基于JSON数据HTML5视频播放器js插件"/>
<h3>基于JSON数据HTML5视频播放器js插件</h3>
</a>
<a href="http://www.htmleaf.com/html5/html5donghua/20141208711.html">
<img src="http://img.htmleaf.com/1412/201412081508.jpg" width="300" alt="html5和css3实用Mobile手机app功能视频展示插件"/>
<h3>html5和css3实用Mobile手机app功能视频展示插件</h3>
</a>
</div>
</div>
<div class="htmleaf-container--content">
<iframe src="http://demo.htmleaf.com/1511/201511011616/index.html" id="iframe" ></iframe>
</div>
</div>
</div>
<script src="http://www.htmleaf.com/templets/default/js/htmleaf-demo.min.js"></script>
<script type="text/javascript">
IS_IPAD=navigator.userAgent.match(/iPad/i)!=null;
var t={desktop:"100%",tabletlandscape:1040,tabletportrait:788,mobilelandscape:480,mobileportrait:340,placebo:0};
jQuery(".responsive a").on("click",function(){
var e=jQuery(this);
for(device in t){
if(e.hasClass(device)){
clicked=device;
jQuery("#iframe").width(t[device]);
if(clicked==device){
jQuery(".responsive a").removeClass("active");
e.addClass("active")}}}
return false});
if(IS_IPAD){
$("#iframe").css("padding-bottom","60px")
}
</script>
<script type="text/javascript">
$(".htmleaf-container--side").mCustomScrollbar({
theme:"minimal"
});
</script>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fe7a3e6b56f1bd183761873eec17147ca' type='text/javascript'%3E%3C/script%3E"));
</script>
</body>
</html>
截一个GIF的图作为背景吧，那样的话就没问题，video现在没材料我也试不了
video直接放body里面，设置html，body和video都是width/height 100%全屏。
然后登陆界面的table放在一个absolute定位的层上上面即可。top/left为50%，margin-left：-(层宽度/2)px，margin-top：-(层高度/2)px实现水平垂直居中
直接插入视频的话就引用上面两位的方法，如果是直接htm了写的话要用