Note that there are some explanatory texts on larger screens.

plurals
  1. POFull video background using video.js
    primarykey
    data
    text
    <p>I'm trying to make a full screen video background that always shows the full size even on window resize.</p> <p>here it's the site: <a href="http://webkunst.comeze.com/test/">http://webkunst.comeze.com/test/</a></p> <p>this is the problem I have:</p> <p>on wide screen it shows like this: <a href="http://webkunst.comeze.com/test/wide.png">http://webkunst.comeze.com/test/wide.png</a></p> <p>and on vertical screen it shows like this: <a href="http://webkunst.comeze.com/test/vertical.png">http://webkunst.comeze.com/test/vertical.png</a></p> <p>As you can see it always put some black bars to the video instead of resizing the video to the full of the screen. </p> <p>This is my markup:</p> <pre><code> &lt;div id="full-background"&gt; &lt;video class="video-js vjs-fullscreen" autoplay preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}"&gt; &lt;source src="video/1.mp4" type='video/mp4' /&gt; &lt;/video&gt; &lt;/div&gt; </code></pre> <p>with this css:</p> <pre><code>#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) */ } </code></pre> <p>I'm using the video.js plugin: <a href="http://videojs.com/">http://videojs.com/</a></p> <p>Any ideas and how to make the video full size without showing black bars on the side or top/bottom?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload