Loop video in background (IE)

by lovromar

HTML

<link href="http://fonts.googleapis.com/css?family=Bitter:400,700,400italic" rel="stylesheet" type="text/css" >
<div class="clouds">
        <video width="600" height="200" autoplay="autoplay" loop="loop" preload>
          <source src="http://www.eclarify.com/videos/background.mp4" type="video/mp4" >
            <source src="http://www.eclarify.com/videos/background.ogg" type="http://leongaban.com/video/ogg" >
            <source src="http://www.eclarify.com/videos/background.webm" type="video/webm" >
            <object data="http://www.eclarify.com/videos/background.mp4" width="1920" height="1080">
                <param name="wmode" value="transparent">
                <param name="autoplay" value="true" >
                <param name="loop" value="true" >
                <embed src="http://www.eclarify.com/videos/background.swf" width="1920" height="1080" wmode="transparent" >
            </object>
        </video> 
    </div>

    <header>
        <div id="main-nav">
            <ul>
                <li><a href="#content">Portfolio</a></li>
                <li><a href="#footer">Contact</a></li>
                <li><a href="#">Resume</a></li>
             </ul>
        </div>

        <div id="logo-title">
            <img src="http://leongaban.com/images/leon_gaban.png" width="256" height="256" class="avatar" />

            <h1>Hello, I'm Leon Gaban</h1>
            <h2>Web Designer &amp; Developer</h2>
            <h3>I believe that successful design succeeds in telling the best story</h3>
        </div>
    </header>

CSS

body {
    width: 100%;
    margin: 0 auto;
    font-family: Bitter, Georgia, serif; 
    background: #ededed;
}

img {
    max-width: 100%;
    height: auto; }
div.clouds {
    position:absolute;
    z-index:1;
    margin:0 auto;
    width:100%;
    overflow: hidden;
}
div.clouds video, div.clouds object, div.clouds embed {
    /*width: 100%;*/
    width: 2000px;
    height: auto;
    min-width: 720px;
    margin: 0 auto;  
}

header {
    width: 100%;
    height: 650px;
    margin: 0 auto;
    position:relative;
    z-index:2;
    /*background: #ededed;*/
    /*border-bottom: 1px solid #ccc;*/
}

header h1, header h3 {
    font-weight: 400;
    font-style: italic; }

header h1, header h2, header h3 {
    color: #fff;
    text-shadow: 1px 1px #414141;
}

header h1 {
    font-size: 2em;
}

header h2 {
    font-size: 3.125em;
    font-weight: 700;
}

header h3 {
    margin-top: 10px;
    font-size: 1.125em;
    /*color: #414141; */
}

#logo-title {
    width: 100%;
    margin: 60px auto;
    text-align: center;
}

.avatar {
    width: 256px;
    height: 256px;
    margin-bottom: 20px;
    -webkit-border-radius: 128px;
    -moz-border-radius: 128px;
    -ms-border-radius: 128px;
    -o-border-radius: 128px;
    border-radius: 128px;
    -webkit-box-shadow: 0 0 0px 6px white, 0 0 0 8px #cccccc, 0 10px 40px #333333;
    -moz-box-shadow: 0 0 0px 6px white, 0 0 0 8px #cccccc, 0 10px 40px #333333;
    box-shadow: 0 0 0px 6px white, 0 0 0 8px #cccccc, 0 10px 40px #333333;
}

#main-nav {
    width: 80%;
    height: 100px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.5em;
    border-bottom: 2px solid white;
}

#main-nav ul li {
    display: inline-block;
    list-style: none;
    padding: 30px 20px 20px; 
}

#main-nav a {
    color: #fff;
    text-shadow: 1px 1px #d74927;
    text-decoration: none;
}
#main-nav a:hover {
    color: #d74927;
}