Full video background using video.js
19,051
Have you tried BigVideo.JS? It uses Video.JS as the core and builds on top of it. It only requires jQuery.
Author by
codek
Updated on July 27, 2022Comments
-
codek almost 2 years
I'm trying to make a full screen video background that always shows the full size even on window resize.
here it's the site: http://webkunst.comeze.com/test/
this is the problem I have:
on wide screen it shows like this: http://webkunst.comeze.com/test/wide.png
and on vertical screen it shows like this: http://webkunst.comeze.com/test/vertical.png
As you can see it always put some black bars to the video instead of resizing the video to the full of the screen.
This is my markup:
<div id="full-background"> <video class="video-js vjs-fullscreen" autoplay preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}"> <source src="video/1.mp4" type='video/mp4' /> </video> </div>
with this css:
#full-background { z-index: -999; min-height: 100%; min-width: 1024px; width: 100%; height: 100%; position: fixed; top: 0; left: 0; } .video-js.vjs-fullscreen { position: fixed; overflow: hidden; z-index: 1000; left: 0; top: 0; bottom: 0; right: 0; width: 100% !important; height: 100% !important; _position: absolute; /* IE6 Full-window (underscore hack) */ }
I'm using the video.js plugin: http://videojs.com/
Any ideas and how to make the video full size without showing black bars on the side or top/bottom?