Trying to create a full browser html5 video effect, identical to this http://css-tricks.com/perfect-full-page-background-image/
but with video I read this thread Full-bleed background videos? and this Html5 Full screen video
and this seems to be the best solution but uses jquery http://syddev.com/jquery.videoBG/ But is there a fool proof method without jquery?
I know this an old question but the answer is quite simple.
Just use this html5 video code, or something along these lines:
<video id="videobackground" preload autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Then apply this css:
#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden
}
The min-height and min-width will allow the video to maintain the aspect ratio of the video, which is usually the aspect ratio of any normal browser at a normal resolution. Any excess video bleeds off the side of the page.
Read more from my website: HTML Video Background Tutorial - HTML5 and CSS only! http://kesilconsulting.com/web-designer-magazine/html-video-background-tutorial/#ixzz2O3BPNZE6
