The CSS that I posted makes the video fill the entire page. If your page is roughly the aspect ratio of the video, then you won’t see much zooming. If you want to make a simple change and have the video fill the browser window (which will usually be roughly video-shaped) but not scroll with the page, then change the line
position: absolute;
to read
position: fixed;
and that will make the video fill the browser window, not the page. This should be the only change you need to make the video more normally-sized.
Any background that you create like this needs a few basic things to ensure that your visitors aren’t inconvenienced.
Removing sound will make the file size smaller, so that’s a win in overall usability. Basic UX rule: only start sound in response to an explicit user click on a well-labeled control. Visit http://decemberists.com for a nice example. There is never any excuse for playing sound on a Web page by default. If your clients insist, remind them that every time you do that, God kills a kitten. Seriously.
Second, make sure the total file size of the video is as low as you can make it. This means a small video in pixels and megabytes and duration. It also needs to have low contrast and low detail, both of which will be incredibly distracting while a visitor tries to read any foreground content centered over the movie. Wispy clouds moving in the background == good. Attractive models in Tartan plaid == bad. (Well, bad for a background.)
Finally, make sure you have made the Ogg and WebM versions for Chrome and Firefox, and that you have properly coded all of the links to these files. You really cannot skip this step, since there is no Flash fallback here. Oh, and forget about Internet Explorer < 10 for this style of background. Realize that they will see the still image only. So that means a further fallback is needed to cover those browsers:
In CSS, add this rule before the closing :
#videobackground img {
height: auto !important;
width: auto !important;
min-height: 100% !important;
min-width: 100% !important;
}
In HTML, add the image as a last-ditch fallback:
<video id="videobackground" poster="Resources/yourMovie.jpg" preload muted autoplay>
<source type="video/ogg" src="Resources/yourMovie.ogv"/>
<source type="video/webm" src="Resources/yourMovie.webm"/>
<source type="video/mp4" src="Resources/yourMovie.mp4"/>
<img src="Resources/yourMovie.jpg" alt="Please consider upgrading your browser" />
</video>
Note how the image src is the same as the poster attribute from the video, and is the last thing in the video container. Naturally, change the code above to match YOUR file names. The HTML5 Action will have taken care of adding the proper style rules through HTML5 Shiv to make IE8 and above handle the video element, so adding the image as the last fallback will make sure that something appears in those browsers as well. Standards-compliant browsers will ignore the image, since the way a video container works is the first thing that the browser can play, it will play, and will skip everything that follows.
Walter
On Sep 1, 2013, at 5:30 PM, Steijn wrote:
Thank you for your comments!
It works now, but it is zoomed in or something?
Please check http://www.skyframes.nl/ you will see that only a part of the movie is being showed.
Best regards,
Steijn
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options