I\'m trying to create a site where I have a background video playing with some HTML5. This is all working perfectly, it works just the way I want it. But I also want to keep
This question just have been referenced into Place video with 100% height & 100% width using css or javascript
I guess my answer for that could be the one you were looking for?
Here's the code:
header {
position: relative;
height: 100vh;
z-index: 0;
}
header h1 {
text-align: center;
font: 3em/1.4 helvetica neue, helvetica, arial, sans-serif;
color: #fff
}
header video {
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}
Sample Title
And here's a working fiddle example.
Hope it'll help someone else :)