I want to use a 4:3 video as a background on a site, but setting the width and height to 100% doesnt work, since the aspect ratio is kept intact, so the video doesnt fill the whole width of the site.
thanks for your help!
here is my html and css code
html:
<!DOCTYPE HTML>
<html land="en">
<head>
<link rel="stylesheet" type="text/css" href="html5video.css" />
<title>html 5 video test</title>
</head>
<body id="index">
<video id="vidtest" autoplay>
<source src="data/comp.ogv" type="video/ogg" width="auto" >
</video>
<div class="cv">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>
css:
body
{
background-color:#000000;
}
#vidtest {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 200%;
height: 100%;
z-index: -1000;
}
.cv
{
width: 800px;
position:relative;
text-align:center;
margin-top: 100px;
color:#FFFFFF;
font-family:"Arial";
font-size: 10px;
line-height: 2em;
text-shadow: 3px 3px 2px #383838;
margin-left: auto;
margin-right: auto;
}