Note that there are some explanatory texts on larger screens.

plurals
  1. POscale HTML5 Video and break aspect ratio to fill whole site
    primarykey
    data
    text
    <p>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.</p> <p>thanks for your help!</p> <p>here is my html and css code</p> <p>html:</p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html land="en"&gt; &lt;head&gt; &lt;link rel="stylesheet" type="text/css" href="html5video.css" /&gt; &lt;title&gt;html 5 video test&lt;/title&gt; &lt;/head&gt; &lt;body id="index"&gt; &lt;video id="vidtest" autoplay&gt; &lt;source src="data/comp.ogv" type="video/ogg" width="auto" &gt; &lt;/video&gt; &lt;div class="cv"&gt; &lt;p&gt; 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.&lt;/p&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>css:</p> <pre><code>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; } </code></pre>
    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.
 

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